Gulp-Sass と Gulp-SourceMaps でソースマップを含んで SCSS ファイルをビルドする

いいかげん SCSS メインで書こうかなーと思い、Gulp で SCSS をビルドするタスクを作った。ついでに Gulp-SourceMaps を挟んでソースマップを出力してみたり、Gulp-Plumber を挟んで Watch 中にビルドエラーになった時に Watch タスクが終了しないようにしてみたりした。

インストールするものは以下のとおり。

$ npm i -D gulp gulp-load-plugins gulp-plumber gulp-sass gulp-sourcemaps

そしてタスクは以下のとおり。

gulp.task('css', () => {
  return gulp
    .src(['./src/css/index.scss'])     // エントリポイントとなる SCSS
    .pipe($.plumber(function(error) {  // アロー関数にすると this が変わって this.emit() が動作しなくなるので function を使う
      return this.emit('end');         // Gulp-Plumber による Watch 中のビルドエラー対策
    }))
    .pipe($.sourcemaps.init())         // ソースマップ出力のための初期準備
    .pipe(
      $.sass({                         // Gulp-Sass による SCSS のビルド
        outputStyle: 'compressed'      // 出力形式は圧縮した CSS にする
      })
      .on('error', $.sass.logError)    // ビルド時のエラーを吸収する
    )
    .pipe($.sourcemaps.write())        // ソースマップを出力する
    .pipe(gulp.dest('./www/css'));     // index.scss とそこから @import している SCSS ファイルたちを ./www/css/index.css にまとめて出力する
});

Gulp-Sass の場合、標準で Browserify 的なファイル結合をやってくれる。gulp.src() で指定したエントリポイントとなるファイルから @import している SCSS ファイルの中身を読み取り、全てをビルド・結合して、最終的に1つの CSS ファイルにまとめてくれる。

その出来上がった CSS ファイルにソースマップを含ませるため、Gulp-SourceMaps の init() と write() を噛ませている。

ついでに Gulp-Plumber を仕込んでおいて、別途 Watch タスクからこの css タスクを呼んだ時に、ビルドエラーで Watch タスクを終了させないようにしている。

これで良い感じ。