

こんにちは。  
gulpについて勉強しております。

色々なサイトを参考に、下記gulpfile.jsファイルを作成しましたが、  
こちらは正しいでしょうか？もっとスマートな書き方がありますでしょうか？  
（一応希望している処理は実行されます。）

[code]

    //変数の宣言
    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/'));
    });
    
[/code]

しかし、

[code]

    .pipe(sass({outputStyle: 'expanded'}))//出力をデフォルトからexpandedに変更。
    
[/code]

の部分がうまくいっていないみたいで、sassファイルコンパイル後のcssファイルがデフォルトのままで見づらいです。原因がわかる方いらっしゃいますでしょうか？

※そのうえで、もし可能であればブラウザの自動更新タスクの記述を追加したいです。(browser-sync)

以上です。  
よろしくお願いいたします。

* * *

追記: `sass` タスクが2つあるのは、全く意図はしたものではなく、見よう見まねでやってみたものです。修正いただけると助かります。


CC BY-SA 3.0
2017-10-21T08:03:42.580
38927
2017-10-23T15:19:57.840
2017-10-23T15:19:57.840
3054
question
javascript gulp
gulpfile.js をスマートな記述にしたい+間違えてる部分を直したい。