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.

Answer 3

Adapting @OverZealous answer to a total gulp newb, here's the gulpfile.js code, 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).

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 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.