HAM MEDIA MEMO

タスクランナーでどれを使うかをいろいろ模索中ですが、今は gulp.js を勉強しておこうと、いろいろと使ってみています。

gulp で Sass をコンパイルする時に使うプラグインはいろいろとあるのですが、今回使ってみるのが gulp-sass です。同じ Sass でも LibSass が使われているものの方がかなり早いですからね。

gulp-sass

この gulp-sass を利用している時に、 Sass のコードでエラーとなる記述をしてしまいますと、 gulp の watch などが止まってしまいます。一度止まってしまうと、 watch が強制終了的な動きをしてしまうので、気づかないでコードを書いていると、表示が変わってない〜と困惑してしまう状況に。

そんな gulp-sass のエラーで処理を止めない方法についてメモとして記載。

解決方法１：オプション指定、プラグイン不要

gulp-sass v1.x まで

gulp-sass のオプションで errLogToConsole を指定しておくことで、処理を止めずにしておけます。

gulp-sass v1.x までの方法

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('_src/**/*.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(gulp.dest('html/css'));
});

gulp-sass v2.x 以降

gulp-sass で利用している node-sass で、エラーがCallbackされるようになったようで、それを拾って表示する形式に変わっています。

gulp-sass v2.x からの方法

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('_src/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('html/css'));
});

これで Sass のエラーが起きても処理が止まらなくなります。

解決方法２：プラグインの利用

Sass の記述エラーがあっても、処理を止めない方法ですが、他にも同じ状況の人いないかなーと検索してみると、西畑さんのエントリーで gulp-plumber を使う方法が書いてありました。

Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」 - to-R

Sass のエラーにかぎらずに、 gulp の .pipe() でエラーになるととまってしまう問題は他でも起きるようで、そのパッチとしてのプラグインのようです。

Monkey patching 'pipe' method from gulp.src · Issue #91 · gulpjs/gulp

gulp-plumber

他の処理でもエラーが起きてしまいそうな場合は、こっちのプラグインを利用するのが良さそうですね。