gulpfile.js をスマートな記述にしたい+間違えてる部分を直したい。
こんにちは。
gulpについて勉強しております。
色々なサイトを参考に、下記gulpfile.jsファイルを作成しましたが、
こちらは正しいでしょうか?もっとスマートな書き方がありますでしょうか?
(一応希望している処理は実行されます。)
//変数の宣言
var gulp = require('gulp'); //gulpを呼び出し使えるように。
var sass = require('gulp-sass'); //sassの呼び出し。
var autoprefixer =require('gulp-autoprefixer'); //ベンダープレフィックス呼び出し
// Sassコンパイルタスクの実行
gulp.task('sass', function(){
gulp.src('./css/sass/test.scss') // どのフォルダのsassを参照するのか設定
.pipe(sass({outputStyle: 'expanded'}))//出力をデフォルトからexpandedに変更。
.pipe(sass().on('error', sass.logError)) //sassを実行しエラーでても止めない。
.pipe(gulp.dest('./css/')); // コンパイルしたscssの出力先を設定
});
// watchタスク(**/*.scss変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
var watcher = gulp.watch('./css/sass/*.scss', ['sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running
tasks...');
});
});
// gulpのデフォルト動作としてsass-watchを実行
gulp.task('default', ['sass-watch']);
//ベンダープレフィックス付与タスクの実行
gulp.task('sass', function () {
return gulp.src('./css/sass/test.scss')
.pipe(sass().on('error', sass.logError))//コンパイル時にエラーがでても止めない。
.pipe(autoprefixer({ //autoprefixerの実行
browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],//メインブラウザの最新2バージョン、iOS 8.1以上、Android Browser 4.4以上という指定
cascade: false
}))
.pipe(gulp.dest('./css/'));
});
しかし、
.pipe(sass({outputStyle: 'expanded'}))//出力をデフォルトからexpandedに変更。
の部分がうまくいっていないみたいで、sassファイルコンパイル後のcssファイルがデフォルトのままで見づらいです。原因がわかる方いらっしゃいますでしょうか?
※そのうえで、もし可能であればブラウザの自動更新タスクの記述を追加したいです。(browser-sync)
以上です。
よろしくお願いいたします。
追記: sass
タスクが2つあるのは、全く意図はしたものではなく、見よう見まねでやってみたものです。修正いただけると助かります。