仅当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的行号对应于生成的bundle,而不是我的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 ),这本身更容易处理:-)