問(wèn)題描述

我正在嘗試連接 gulp-browserify 和 gulp-watch 每次源文件更改.但是，gulp-browserify 需要一個(gè)單一的編譯入口點(diǎn)(例如 src/js/app.js)并自行獲取每個(gè)依賴(lài)項(xiàng):

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 無(wú)法在每次更改時(shí)重建，因?yàn)橹槐O(jiān)視入口點(diǎn)文件.我真正需要的是可以查看多個(gè)文件，然后只處理入口點(diǎn)文件(查找 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"));

所以問(wèn)題是:如何將 gulp-browserify 指向入口點(diǎn)文件并在任何源文件的更改時(shí)觸發(fā)重建?如果解決方案包括限制會(huì)很好:啟動(dòng)時(shí)，每個(gè)源文件都被設(shè)置為觀看，因此我們的入口點(diǎn)文件將通過(guò)管道傳輸?shù)?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.

推薦答案

只要調(diào)用一個(gè)正常的文件更改任務(wù)，像這樣:

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(因?yàn)樗梢圆檎倚挛募?，那么你需要這樣做:

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 還具有批處理操作的好處，因此如果您一次修改多個(gè)文件，您將不會(huì)連續(xù)獲得一堆構(gòu)建.

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.

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