0

我不知道为什么即使我的 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}));
});
4

2 回答 2

2

gulp-jshint照你说的做：它报告 JavaScript 文件中的错误。不多也不少。它不会阻止有缺陷的 JavaScript 文件到达后面的管道阶段uglify()（如果 JavaScript 文件中有任何错误，它会抛出并因此停止您的服务器）。

如果你想防止有缺陷的 JavaScript 文件破坏你的服务器，你需要把所有的jshint东西放到它自己的任务中，并确保当任何 JavaScript 文件有错误时任务失败：

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 的最后一个良好版本运行。

于 2016-12-28T18:21:30.273 回答
0

最简单的解决方法是使用 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 条件，以防止基于环境变量构建损坏的代码。

于 2017-02-21T00:36:36.047 回答