streamgulpbrowserifywatchify

How do I watchify multiple targets in Gulp?


I am using browserify to listen to compile multiple files into multiple targets, like so (using this trick):

gulp.task('js', function () {
    var bundler = through2.obj(function (file, enc, next) {
        browserify(file.path).bundle(function(err, res) {
            file.contents = res;
            next(null, file);
        });
    });

    return gulp.src(['foo.js', 'bar.js'])
        .pipe(bundler)
        .pipe(uglify())
        // Other pipes
        .pipe(gulp.dest('./compiled'));
});

How can I combine this through2 usage with watchify? The common advice about using vinyl-source-stream does not work for me. I want to generate two files (compiled/foo.js and compiled/bar.js). I don't want to combine the files into one.


Solution

  • I figured out how to combine through2 and watchify. The trick is to not call next() on updates:

    var bundler = through.obj(function (file, enc, next) {
        var b = watchify(browserify(file.path))
    
        b.on('update', function () {
            gutil.log('Updated', gutil.colors.magenta(file.path));
    
            b.bundle(function (err, res) {
                file.contents = res;
                // Do not call next!
            });
    
            b.on('log', gutil.log);
        }
    
        b.bundle(function (err, res) {
            file.contents = res;
            next(null, file);
        });
    });