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

Question

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'))

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

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.

Answer 1

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.task("watch", function() {
    watch({glob: "src/**/*.js"}, function() {
        gulp.start("build-js");
    });
});

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.

Answer 2

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

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

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

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

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

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.