6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp-compassのエラー時に、browser-syncによるリロードが止まる問題の解決方法

Last updated at Posted at 2015-10-09

gulpでソースファイルに変更があった際、gulp-plumberを通したwatchタスク後にコールバックでbrowser-syncによるリロードをさせてましたが、
gulp-compassのエラー時のみ、リロードがされずに処理が止まる問題に悩まされていました。
scssファイルの変更は頻繁に確認するのでけっこう厄介な問題でしたが、最近解決したのでその方法を記しておこうと思います。

各プラグインのバージョン

gulp@3.8.11(CLI, localともに)
gulp-compass@2.1.0
gulp-plumber@1.0.1
browser-sync@2.9.10

原因

gulp-plumberに適切なエラー処理を書いてなかったのが原因でした。
gulp-plumberは特にエラー処理を指定しなくても動作することが多いですが、
gulp-compassと併用する際には以下のようにエラーハンドラを記述しないといけないようです。

gulpfile.js
var compass = require('gulp-compass'),
    plumber = require('gulp-plumber');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
     //.pipe(plumber()) // NG
    .pipe(plumber({ // OK
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(compass({
      css: 'src/css',
      sass: 'src/sass',
    }))
    .pipe(gulp.dest('dist/assets/css'));
});

(あとで調べたらgulp-compass公式の下の方にplumberとの使い方が書いてあったのに気づきました…)

正直なところ、仕組みはよく分かってないのですが、this.emit('end')によって一旦watchタスクを終了させている?のがポイントのようです。

追記

後にgulp-lessでも似たようなエラーに遭遇し、同様の方法によって解決しました。
おまじない的な感じで、とりあえず上記エラーハンドラを書いておくといいのかもしれません。

6
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?