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

2022-01-12 00:00:00 javascript gulp browserify

我正在尝试连接 gulp-browserify 和 gulp-watch 每次源文件更改.但是，gulp-browserify 需要一个单一的编译入口点(例如 src/js/app.js)并自行获取每个依赖项:

I'm trying to wire up gulp-browserify and gulp-watch to rebuild my bundle each time a source file changes. However, gulp-browserify requires a single entry point for the compilation (e.g. src/js/app.js) and fetches every dependency itself:

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

但是，使用 gulp-watch 无法在每次更改时重建，因为只监视入口点文件.我真正需要的是可以查看多个文件，然后只处理入口点文件(查找 replaceEverythingWithEntryPointFile):

However, with gulp-watch this fails to rebuild on every change because only the entry point file is being watched. What I actually need is a possibility to watch multiple files and then process only the entry point file (look for replaceEverythingWithEntryPointFile):

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

所以问题是:如何将 gulp-browserify 指向入口点文件并在任何源文件的更改时触发重建?如果解决方案包括限制会很好:启动时，每个源文件都被设置为观看，因此我们的入口点文件将通过管道传输到 gulp-browserify 与文件一样多，这是不必要的.

So the question is: how can I point gulp-browserify to the entry point file and trigger rebuild on a change in any source file? Would be nice if the solution included throttling: when starting up, every source file is being set up for watching and thus our entry point file would be piped to gulp-browserify as many times as there are files, which is unnecessary.

推荐答案

只要调用一个正常的文件更改任务，像这样:

Just call a normal task on file change, like this:

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(因为它可以查找新文件)，那么你需要这样做:

If you want to use gulp-watch (because it can look for new files), then you need to do something like this:

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

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

Using gulp-watch also has the benefit of batching operations, so if you modify several files at once, you won't get a bunch of builds in a row.

相关文章