【gulp、javascript】gulpfile.js をスマートな記述にしたい+間違えてる部分を直したい。

Question

こんにちは。
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ファイルがデフォルトのままで見づらいです。原因がわかる方いらっしゃいますでしょうか？

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

Answer 1

sourcemapを設定しましょう。

• gulp-sass - GitHub
• Source MapでSass/Compassを簡単にCSSをデバッグする