只有在棉绒通过Gulp后才能进行Browserify
我正在尝试实现这个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在整个bundle上运行。 我可以处理性能损失，但JSHint的行号对应于生成的包，而不是我的JS源文件，这很痛苦。
这是一个很酷的想法。 我已经使用watchify在我的管道中实现了这一点，它将使用默认记录器对文件进行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 Errorn')))
.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的快速browserify构建官方配方（https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md），并且是一种“一体式”类型的任务; 也就是说我通常会在后台某个地方产生一个单独的任务，只需要最少的日志记录（我用--silent标志运行--silent ），这对于个人来说更容易处理:-)