gulp 即使 gulpfile.js 中包含 jshint，也会在出错时停止服务器

Question

我不知道为什么即使我的 gulpfile 中有 jshint，只要我的 js 文件出现错误，服务器仍然会停止。我安装了 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}));
});

现在您的 scripts 任务只会在 jshint 任务成功时运行。如果任何 JavaScript 文件有缺陷 jshint 将在您的服务器继续运行使用您的 JavaScript.

的最后一个良好版本时将错误输出到控制台

Answer 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
        }));
});

首先，请注意我没有写信给多个目的地。相反，我使用 sourcemaps 这样您就不需要未压缩的代码。其次，我使用 gulp-if 根据 jshint 的结果通过 uglify 有条件地传输您的代码。有错误的代码将绕过 uglify，这样它仍然可以进入您的目标文件。

现在，您可以使用开发人员工具对其进行检查和调试。

注意：我推荐这个只用于本地开发。我不会将其连接到持续集成管道，因为您只需要好的代码即可将其投入生产。为此设置不同的任务或添加另一个 gulp-if 条件以防止基于环境变量构建损坏的代码。

gulp 即使 gulpfile.js 中包含 jshint，也会在出错时停止服务器

gulp stops server on error even with jshint included in gulpfile.js

jshint

gulp

gulp-jshint