即使 gulpfile.js 中包含 jshint，gulp 也会停止服务器错误答案

【问题标题】：gulp stops server on error even with jshint included in gulpfile.js即使 gulpfile.js 中包含 jshint，gulp 也会停止服务器错误
【发布时间】：2016-12-28 14:35:04
【问题描述】：

我不知道为什么当我的 js 文件中有错误时服务器仍然停止，即使我的 gulpfile 中有 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}));
});

【问题讨论】：

标签： gulp jshint gulp-jshint

【解决方案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}));
});

现在您的scripts 任务将仅在jshint 任务成功时运行。如果任何 JavaScript 文件有缺陷，jshint 会将错误输出到控制台，同时您的服务器继续使用您的 JavaScript 的最后一个良好版本运行。

【讨论】：

【解决方案2】：

最简单的解决方法是使用 gulp-plumber 更优雅地处理错误：

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 条件，以防止基于环境变量构建损坏的代码。

【讨论】：