How can I input and output multiple files with gulp and browserify

Question

I'm sure there's a way to do this, but I couldn't find it. What I want is to pass multiple files into browserify and output multiple files - this is useful for a case where a site has multiple SPA's, with each having its own requires.

Say I have app1.js, app2.js, etc, with each loading in different pages and having independent require('..') statements. I'm looking for a task that does something like this:

gulp.task('browserify', function() {
  return
  gulp.src('src/**/*.js')
  .pipe(browserify) // 
  .pipe(gulp.dest('dist'));
});

Any idea what's a simple way to accomplish this? thanks.

Answer 1

I stumbled upon this problem actually earlier this week. The problem of "creating multiple bundles". This should work:

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

gulp.task('default', function() {
    // Your main files
    var files = [
        './app/main-a.js',
        './app/main-b.js'
    ];
    // Create a stream array
    var tasks = files.map(function(entry) {
        return browserify({ entries: [entry] })
            .bundle()
            .pipe(source(entry))
            .pipe(gulp.dest('./dist')); 
        });
    return es.merge.apply(null, tasks);
});

Please do not use the gulp-browserify plugin, as it's blacklisted by now. Use browserify itself instead.

Same with Globs:

gulp.task('withglob', function() {
    return glob('./app/main-**.js', function(err, files) {
        var tasks = files.map(function(entry) {
            return browserify({ entries: [entry] })
                .bundle()
                .pipe(source(entry))
                .pipe(rename({
                    extname: '.bundle.js'
                }))
                .pipe(gulp.dest('./dist')); 
            });
        return es.merge.apply(null, tasks);
    })
});

Btw.: That's the reason