How do I create multiple bundles with gulp-browserify?

Question

I'm trying to use blanket.js to measure test coverage of my browserified library, and the coverage numbers aren't making much sense since I'm including jQuery, lodash, es5-shim, and x-tag-core.js in the bundle.

I would like to create multiple bundles, as described in the browserify documentation, but from gulp instead of the command line. Essentially I would like to do something like Sebastian Deutch describes, except without the the concatenation step at the end (he's doing separate bundles to shorten compile times).

Can anyone point me to an example of how to do this? (or a better way of doing code coverage..?)

https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md — Konstantin Tarkus, Jul 20 '14 at 23:40
That looks like a better way to shorten compile times, however it doesn't solve my test coverage problem. `blanket.js` uses a `data-cover` attribute on the script tag to know where to apply coverage, and when `jQuery` et.al. is contained in the browserify bundle my coverage plummets since I'm obviously not covering all of `jQuery`.. — thebjorn, Jul 21 '14 at 15:19

score 4 · Accepted Answer · edited Aug 03 '15 at 11:56

After a lot of trial-and-error, and after abandoning the gulp-browserify plugin (it's black-listed, but examples of using browserify directly in gulp are hard to come by), I managed to get this working. The salient parts of my gulpfile.js are (I'm not sure at all what the source calls do):

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    clean = require('gulp-rimraf'),
    rename = require('gulp-rename'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify');

gulp.task('browserify:externals', function () {
    var vendor = browserify(['jquery', 'es5-shim', 'lodash']);
    vendor.require('jquery');
    vendor.require('lodash', {expose: '_'});
    vendor.require('es5-shim');
    return vendor.bundle()
        .pipe(source("not-used-but-needed-string.js"))
        .pipe(rename('external.js'))
        .pipe(gulp.dest('./dist'))
        .on('error', gutil.log);
});

gulp.task('browserify', ['browserify:externals'], function () {
    var app = browserify('./index.js');
    app.external('jquery');
    app.external('es5-shim');
    app.require('./index.js', {expose: 'maxby'});
    return app.bundle()
        .pipe(source("not-used-but-needed-string.js"))
        .pipe(rename('maxby.js'))
        .pipe(gulp.dest('./dist'))
        .on('error', gutil.log);
});

I've also created a repository with a complete, but minimal example (I'm quite new at this so any corrections are much appreciated).

How do I create multiple bundles with gulp-browserify?

1 Answers1