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

gulpを利用しているとSassなどのコンパイルエラーが出た際にwatchなどのタスクが強制終了されてしまいます。エラー時にタスクを強制終了させないためのプラグインが「gulp-plumber」です。

(gulpの使い方は「タスクランナーgulp入門」を参照)

まず、以下のコマンドでgulp-plumberをインストール。

sudo npm install gulp-plumber --save-dev

利用時には以下のよう他の処理の前に「.pipe(plumber())」と記述します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
 
//config
var root = "htdocs",
    config = {
   "path" : {
      "htdocs"    : root,
      "sass"      : root+"/sass",
      "css"       : root+"/css"
   }
}
  
//watch task
gulp.watch('htdocs/sass/**/*.scss', ['sass']);
 
//Sass & autoprefixer
gulp.task('sass', function () {
    gulp.src(config.path.sass+'/*')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest(config.path.css));
});

これで、Sassなどでエラーが出てもgulpのwatchが止まることはありません。これは必須のプラグインですね。

参考:Grunt.jsからgulp.jsに宗旨替えした - isoden.me

関連エントリー

gulpとnode.jsの連携
CSSスプライトを生成する「grunt-spritesmith」
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
grunt-webfontで書き出されるwebフォントの文字列を変更
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」

スポンサードリンク

«gulpとnode.jsの連携 | メイン | gulpでJavaScriptの結合圧縮処理»