Question

我试图实现这个Gulp流：

enter image description here

这似乎是一个相当简单的过程，但据我所知，不可能实现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）进行快速浏览器构建的官方配方，并且是一个多功能的＆＃39;类型任务;也就是说我通常会在后台的某个地方生成一个单独的任务，使用 minimal 日志记录（我使用--silent标志运行gulp），这个更容易处理： - ）

仅当lint在Gulp中传递时才进行Browserify

1 个答案: