Question

我不知道为什么只要我的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}));
});

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

首先，请注意我没有写到多个目的地。相反，我使用的是源代码，因此您不需要明确的代码。其次，我正在使用gulp-if根据jshint的结果通过uglify有条件地管理你的代码。带有错误的代码将绕过uglify，以便它仍然可以进入目标文件。

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

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

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

2 个答案: