gulp - 仅当 lint 在 Gulp 中通过时才进行 Browserify

Question

我正在尝试实现此 Gulp 流:



这似乎是一个相当直接的过程，但据我所知，不可能实现为 Gulp 流。

我目前正在这样做:

gulp.task('js', function () {
    return browserify('foo/main.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(streamify(jshint()))
        .pipe(jshint.reporter('default'))
        // source map, minify, …
});

问题是 JSHint 应该首先运行，只在更改的文件上运行，如果 lint 失败，应该中止进程。在我的设置中，Browserify 总是运行，然后 JSHint 在整个包上运行。我可以处理性能损失，但是 JSHint 的行号对应于生成的包，而不是我的 JS 源文件，这很痛苦。

Answer 1

这是一个很酷的主意。我已经使用 watchify 在我的管道中实现了这一点，它将使用默认报告器 lint 文件，如果更改的文件没有通过 lint 测试，则使用失败报告器。尽管在问题中建议这样做，但我个人会避免这样做，因为您真正想要的只是让您的记者发出 lint 检查，同时保持开发观察者仍在后台生成。否则，您必须不断重新启动任务，这通常会困扰我。无论如何，这是代码:

'use strict';

var assign       = require('object-assign'),
    gulp         = require('gulp'),
    gutil        = require('gulp-util'),
    merge        = require('merge-stream'),
    jshint       = require('gulp-jshint'),
    source       = require('vinyl-source-stream'),
    watchify     = require('watchify'),
    browserify   = require('browserify');

var resources = {
    mainJS    : 'main.js',
    bundleJS  : 'bundle.js',
    root      : 'www'
};

function res(r) {
    return './' + resources[r];
}

gulp.task('watch', function() {
    var bundler = watchify(browserify(res('mainJS'), assign(watchify.args, {
        fullPaths: false
    })));

    var scripts = function(changedFiles) {
        var compileStream = bundler
            .bundle()
            .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error\n')))
            .pipe(source(res('bundleJS')))
            .pipe(gulp.dest(res('root')));

        if (changedFiles) {
            var lintStream = gulp.src(changedFiles)
                .pipe(jshint())
                .pipe(jshint.reporter('default'))
                .pipe(jshint.reporter('fail'));

            return merge(lintStream, compileStream);
        }

        return compileStream;
    };

    bundler.on('update', scripts);

    return scripts();
});

请注意，这很大程度上基于使用 watchify ( https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md ) 进行快速浏览器构建的官方配方，并且是“一体机”类型的任务；也就是说，我通常会在后台某处生成单个任务，日志记录最少(我使用 --silent 标志运行 gulp)，这对个人来说更容易处理:-)