例えば、gulp.watchでsassをコンパイルするタスクを動かしていた場合、sassの記述を間違えてファイルを保存してしまうと、コンパイルエラーとなり、gulp自体が停止してしいまいます。
|
1 2 3 4 5 6 |
[11:40:59] Starting 'sass'... events.js:183 throw er; // Unhandled 'error' event ^ Error: src/sass/style.scss |
こうなるとsassの記述間違いを直して再度gulpを実行する必要が出てしまうので、とても面倒です。
そんな時に便利なのがgulp-plumberです。
このモジュールを使うとエラーになってもgulp自体の停止が回避できます。エラーを気にする必要なく開発に専念できますね！
gulp-plumber のインストール
|
1 |
npm install --dev-save gulp-plumber |
いつものnpmコマンドですね。
gulpfile.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
let gulp = require('gulp'); let sass = require('gulp-sass'); let plumber = require('gulp-plumber'); gulp.task('sass', function () { return gulp.src('src/sass/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(gulp.dest('dist/css')); }); gulp.task('sass:watch', function() { gulp.watch('src/sass/*.scss', ['sass']); }); gulp.task('default', ['sass:watch']); |
使い方はとても簡単です。
3行目でモジュールを読み込みます。
エラーが出てもgulpを中断したくない処理(今回だと7行目)の間で呼び出せばOKです。
後はgulpを起動して、エラーになるよにsassファイルを改修してみましょう！
|
1 2 3 4 5 6 7 8 |
>> width:$divWidth2; --------^ messageOriginal: Undefined variable: "$divWidth2". relativePath: src/sass/style.scss [17:23:17] Finished 'sass' after 25 ms |
エラーにはなりましたが、gulp自体は動き続けます。
後はエラーの箇所を修正すれば、いつものように再度コンパイルをしてくれます。
|
1 2 3 |
[17:23:17] Finished 'sass' after 25 ms [17:25:41] Starting 'sass'... [17:25:42] Finished 'sass' after 13 ms |
たったこれだけでコンパイル時にエラーが出ても、gulpの実行が中断されることが無くなります。簡単で便利なので、どのプロジェクトでも使用していきたいですね。
