gulp-plumber 額外處理

在編譯 Scss 及最小化 JavaScript 的時候使用加入pipe(gulpPlumber())使用 gulp-plumber，錯誤捕獲，防止出錯後中斷gulp

注意：pipe(gulpPlumber())一定要在編譯 Scss 及最小化 JavaScript之前就優先加入（加入順序有差異），否則會無法起到作用

安裝 NPM

npm install gulp-plumber --save-dev

https://www.npmjs.com/package/gulp-plumber

使用

var plumber = require('gulp-plumber');// 額外處理

// SASS
gulp.task('sass', function () { // 定義 sass 的任務名稱
  return gulp.src('./styles/**/*.scss') // 指定要處理的 Scss 檔案目錄
    .pipe(plumber())                    // 使用 gulp-plumber 處理例外
    .pipe(Sass()) // 編譯 Scss
    .pipe(gulp.dest('html/assets/css')) // sass 編譯完成後的匯出資料夾
    .pipe(cleanCSS()) //壓縮＆重新命名
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/css'))
    .pipe(livereload());  //當檔案有修改儲存自動更新頁面
});



// 壓縮合併ＪＳ
gulp.task('js', function() {
    return gulp.src('./javascripts/**/*.js') // 指定要處理的原始 JavaScript 檔案目錄
    .pipe(plumber())                    // 使用 gulp-plumber 處理例外
    .pipe(concat('default.js')) // 合併後的檔案名稱
    .pipe(gulp.dest('./html/assets/js')) // 指定合併後的 JavaScript 檔案目錄
    .pipe(uglify())                   // 壓縮
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/js')) // 指定合併後的 JavaScript 檔案目錄
    .pipe(livereload());    //當檔案有修改儲存自動更新頁面
});

執行

執行gulp watch 之後

未加入前

$ gulp watch
[15:49:37] Using gulpfile ~/gulpfile.js
[15:49:37] Starting 'watch'...
[15:49:37] Finished 'watch' after 12 ms
[15:49:48] Starting 'sass'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: styles/default.scss
Error: Invalid CSS after "        margin": expected "}", was ": 0"
        on line 13 of styles/default.scss
>>         margin: 0
   --^

    at options.error (/index.js:291:26)

加入後

$ gulp watch
[15:52:46] Using gulpfile ~/gulpfile.js
[15:52:46] Starting 'watch'...
[15:52:46] Finished 'watch' after 13 ms
[15:53:01] Starting 'sass'...
[15:53:01] Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:styles/default.scss
Error: Invalid CSS after "margin": expected "}", was ": 0" on line 13 of styles/default.scss 
       margin: 0

Details:
    status: 1
    file: styles/default.scss
    line: 13
    column: 3
    formatted: Error: Invalid CSS after "margin": expected "}", was ": 0"on line 13 of styles/default.scss
               margin: 0

    messageFormatted: styles/default.scss
    Error: Invalid CSS after "margin": expected "}", was ": 0" on line 13 of styles/default.scss 
           margin: 0

    messageOriginal: Invalid CSS after "margin": expected "}", was ": 0"
    relativePath: styles/default.scss