如何使用gulp-browserify查看多个文件但只处理一个文件？

Question

每次源文件发生变化时,我都会尝试连接gulp-browserify并gulp-watch重建我的软件包.但是,gulp-browserify需要单个入口点进行编译(例如src/js/app.js)并获取每个依赖项本身:

gulp.src('src/js/app.js')
    .pipe(browserify())
    .pipe(gulp.dest('dist'))

但是,gulp-watch由于只有正在监视入口点文件,因此无法在每次更改时重建.我真正需要的是可以观察多个文件,然后只处理入口点文件(寻找replaceEverythingWithEntryPointFile):

gulp.src("src/**/*.js")
    .pipe(watch())
    .pipe(replaceEverythingWithEntryPointFile()) // <- This is what I need
    .pipe(browserify())
    .pipe(gulp.dest("dist"));

所以问题是:我如何指向gulp-browserify入口点文件并在任何源文件的更改中触发重建？如果解决方案包括限制,那将是很好的:当启动时,每个源文件都被设置用于观看,因此我们的入口点文件将被管道传输到gulp-browserify文件的次数,这是不必要的.

Answer 1

只需在文件更改时调用正常任务,如下所示:

gulp.task("build-js", function() {
    return gulp.src('src/js/app.js')
        .pipe(browserify())
        .pipe(gulp.dest('dist'))
});

gulp.task("watch", function() {
    // calls "build-js" whenever anything changes
    gulp.watch("src/**/*.js", ["build-js"]);
});

如果你想使用gulp-watch(因为它可以查找新文件),那么你需要做这样的事情:

gulp.task("watch", function() {
    watch({glob: "src/**/*.js"}, function() {
        gulp.start("build-js");
    });
});

使用gulp-watch也有批处理操作的好处,因此如果您一次修改多个文件,您将不会连续获得一堆构建.

Answer 2

gulp-browserify已在npm-repository上列入黑名单

优选的方法是直接与乙烯基源流一起使用browserify.

这意味着在构建脚本中声明browserify和vinyl-source-stream:

var browserify = require('browserify'),
    source = require('vinyl-source-stream');

然后在函数中使用它们来构建组合的JS文件.

function buildVendorJs()
{ 
    return browserify('./js/vendor.js')
        .bundle()
        .pipe(source('./js/vendor.js'))
        .pipe(debug({verbose: true}))
        .pipe(gulp.dest(outputDir));
}

完成后,browserify将使用vendor.js中的requires('...')调用创建一个依赖关系树,并构建一个新的vendor.js,其中所有依赖关系都是模块化的,并被拉入单个vendor.js文件中.