問題描述

我正在嘗試連接 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.

這篇關于如何使用 gulp-browserify 觀看多個文件但只處理一個文件?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！