例外處理，避免例外導致 gulp watch 失效中斷
當我們在使用 gulp watch 監看 gulp-sass 編譯 Scss 或 gulp-uglify 去最小化 JavaScript 時，當 CSS 或 JavaScript 程式寫錯時，gulp 在處理 Scss 跟 JavaScript 會丟出例外，並中斷執行 gulp watch 的監看
但我們程式寫錯是無法避免的，而我們希望 gulp watch 能夠在我們把程式錯誤改回來後，繼續做監看的動作，我們就可以使用 gulp-plumber
$ gulp watch
[19:51:45] Using gulpfile ~/Code/Project/gulpfile.js
[19:51:50] Starting 'styles'...
[19:51:50] Finished 'styles' after 2.21 ms
[19:51:57] Starting 'styles'...
[19:51:57] Finished 'styles' after 1.45 ms
[20:00:32] Starting 'styles'...
[20:00:32] Finished 'styles' after 2.74 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: /scss/test.scss
29:1 invalid top-level expression
at options.error (/Users/kejyun/Project/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)
$ npm install --save-dev gulp-plumber
我們可以在編譯 Scss 及最小化 JavaScript 的時候使用加入 pipe(gulpPlumber()) 去使用 gulp-plumber
注意：
pipe(gulpPlumber())一定要在編譯 Scss 及最小化 JavaScript之前就優先加入（加入順序有差異），否則會無法起到作用
var gulp = require('gulp'), // 載入 gulp
gulpUglify = require('gulp-uglify'), // 載入 gulp-uglify
gulpSass = require('gulp-sass'), // 載入 gulp-sass
gulpPlumber = require('gulp-plumber');// 載入 gulp-plumber
gulp.task('watch', function () {
gulp.watch('javascript/original/*.js', ['scripts']);
gulp.watch('scss/**/*.scss', ['styles']);
});
gulp.task('script', function () {
gulp.src('javascript/original/*.js') // 指定要處理的原始 JavaScript 檔案目錄
.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外
.pipe(gulpUglify()) // 將 JavaScript 做最小化
.pipe(gulp.dest('javascript/minify')); // 指定最小化後的 JavaScript 檔案目錄
});
gulp.task('styles', function () {
gulp.src('scss/**/*.scss') // 指定要處理的 Scss 檔案目錄
.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外
.pipe(gulpSass({ // 編譯 Scss
outputStyle: 'compressed'
}))
.pipe(gulp.dest('css')); // 指定編譯後的 css 檔案目錄
});
在發生例外時，gulp watch 會顯示例外資訊，當我們重新修正程式後，gulp 就會繼續自己重新編譯 Scss 或最小化 JavaScript
這樣就不會在手殘時還需要重新做 gulp watch 去監看所有 gulp 的工作了，Enjoy it～
$ gulp watch
[20:13:44] Using gulpfile ~/Code/italkjob/gulpfile.js
[20:13:44] Starting 'scripts'...
[20:13:44] Finished 'scripts' after 15 ms
[20:13:44] Starting 'styles'...
[20:13:44] Finished 'styles' after 5.89 ms
[20:13:44] Starting 'watch'...
[20:13:44] Finished 'watch' after 19 ms
[20:13:44] Starting 'default'...
[20:13:44] Finished 'default' after 23 μs
[20:13:50] Starting 'styles'...
[20:13:50] Finished 'styles' after 3.65 ms
[20:13:51] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
scss/test.scss
29:1 invalid top-level expression
Details:
column: 1
line: 29
file: stdin
status: 1
messageFormatted: scss/test.scss
29:1 invalid top-level expression
[20:13:53] Starting 'styles'...
[20:13:53] Finished 'styles' after 2.26 ms