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

How do I watch multiple files with gulp-browserify but process only one?

提问by Nikolai Prokoschenko

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

每次源文件更改时，我都试图连接gulp-browserify并gulp-watch重建我的包。但是，gulp-browserify编译需要一个入口点（例如src/js/app.js）并获取每个依赖项本身：

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

However, with gulp-watchthis 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-watch由于只监视入口点文件，因此无法在每次更改时重建。我真正需要的是可以观看多个文件，然后只处理入口点文件（查找replaceEverythingWithEntryPointFile）：

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

So the question is: how can I point gulp-browserifyto 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-browserifyas many times as there are files, which is unnecessary.

所以问题是：如何指向gulp-browserify入口点文件并在任何源文件中发生更改时触发重建？如果解决方案包括节流，那就太好了：启动时，每个源文件都被设置为观看，因此我们的入口点文件将被传送到gulp-browserify与文件一样多的次数，这是不必要的。

回答by OverZealous

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"]);
});

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

如果你想使用gulp-watch（因为它可以寻找新文件），那么你需要做这样的事情：

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

Using gulp-watchalso 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-watch还具有批处理操作的好处，因此如果您一次修改多个文件，您将不会连续获得一堆构建。

回答by Ryan Kimber

gulp-browserify has been black-listed on the npm-repository

gulp-browserify 已被列入 npm-repository 黑名单

The preferred method is to use browserify directly in combination with vinyl-source-stream.

首选方法是将 browserify 直接与vinyl-source-stream 结合使用。

This means declaring browserify and vinyl-source-stream in your build script:

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

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

And then utilizing them in your functions to build your combined JS file.

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

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

With that done, browserify will create a dependency tree using the requires('...') calls in vendor.js and build a new vendor.js where all of the dependencies are modularized and pulled into a single vendor.js file.

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

回答by matanster

Adapting @OverZealous answer to a total gulp newb, here's the gulpfile.jscode, with inline explanations. (This file would be placed at the project root and run from that location, and that is all you'd need other than the npm installs detailed at the bottom).

将@OverZealous 的答案改编为一个完整的新人，这里是gulpfile.js代码，带有内联解释。（此文件将放置在项目根目录下并从该位置运行，除了底部详述的 npm 安装之外，这就是您所需要的全部内容）。

var gulp = require('gulp');
var watch = require('gulp-watch');
var browserify = require('gulp-browserify');

//
// task for building - invoked simply via 'gulp'
// 
gulp.task('default', function() {
  return gulp.src('public-script-source/main.js') /* source to build */
        .pipe(browserify())
        .pipe(gulp.dest('public/script'))         /* output directory */
});

//
// task for continuously building upon javascript change - 
// invoked via 'gulp watch'
// 
gulp.task("watch", function() {
    watch({glob: "public-script-source/*.js"}, function() {
        gulp.start("default");
    });
});

Don't forget npm installing the three requires, if not already installed:

不要忘记 npm 安装三个需要，如果还没有安装：

npm install --save-dev gulp gulp-watch gulp-browserify

Please don't accept this answer as it was adapted from @OverZealous. As an alternative to all the above, you may try https://github.com/substack/watchify(didn't try it myself), but a task manager approach, like above, can also scale for you when you later need additional things running for your build beyond just browserify.

请不要接受这个答案，因为它改编自@OverZealous。作为上述所有方法的替代方案，您可以尝试https://github.com/substack/watchify（我自己没有尝试过），但是当您以后需要额外时，任务管理器方法也可以为您扩展，就像上面一样为您的构建运行的东西不仅仅是browserify.