gulp即使在包含在gulpfile.js中的jshint時也會錯誤地停止服務器

Question

我不知道爲什麼服務器在我的js文件中存在錯誤時仍然停止，即使我在我的gulp文件中有jshint。我安裝了jshint並將其包含在我的項目中，因爲它報告js文件中的錯誤，但仍然失敗。我怎樣才能解決這個問題？

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

Answer 1

gulp-jshint確實如此：它會報告JavaScript文件中的錯誤。沒有更多，沒有更多。它不會阻止有缺陷的JavaScript文件進入後續管道階段，如uglify()（如果JavaScript文件中存在任何錯誤，則會拋出並因此停止服務器）。

如果你想防止有缺陷的JavaScript文件衝倒你的服務器，你需要把所有的jshint東西到它自己的任務，確保任務fails when any JavaScript file has an error：

gulp.task('jshint',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(jshint.reporter('fail')) 
}); 

然後，你需要讓你的scripts任務取決於jshint任務：

gulp.task('scripts', ['jshint'],() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

現在，當jshint任務是成功的scripts任務纔會運行。如果任何JavaScript文件存在缺陷jshint將在您的服務器繼續使用您的JavaScript的最後一個良好版本繼續運行時將錯誤輸出到控制檯。

Answer 2

的簡單的解決辦法是使用一口，管道工一點更加妥善地處理錯誤：

var plumber = require("gulp-plumber"); 

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(plumber()) 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

就個人而言，我不喜歡這樣的解決方案，因爲它會阻止你的縮小的文件被更新。這裏是我會推薦的：

var jshintSuccess = function (file) { 
    return file.jshint.success; 
} 

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(sourcemaps.init()) 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', { 
      beep: true 
     })) 
     .pipe(gulpif(jshintSuccess, uglify())) 
     .pipe(concat('main.js')) 
     .pipe(sourcemaps.write('maps')) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({ 
      stream: true 
     })); 
}); 

首先，請注意，我沒有寫入多個目的地。相反，我使用的是源代碼，因此您不需要未分類的代碼。其次，我使用gulp-if基於jshint的結果通過uglify有條件地管理你的代碼。有錯誤的代碼將繞過uglify，以便它仍然會將其轉化爲目標文件。

現在，您可以使用開發人員工具對其進行檢查和調試。

注：我建議僅限本地開發。我不會將其連接到持續集成管道，因爲您只需要良好的代碼即可投入生產。要麼爲此設置不同的任務，要麼添加另一個gulp-if條件以防止基於環境變量構建損壞的代碼。