Warning

This post is very outdated, and should not be used or referenced anymore.

webpack can be used instead, and provides a better workflow with a fraction of the effort.

The original post from 2014 is reproduced below for posterity:

Browserify is a Javascript tool that can “bundle” a modularized application into a single app.js file for the browser. It lets developers use Node.JS style modules, declaring public APIs using module.exports and including other modules with require(). Then Browserify will wire the modules together and bundle everything up into a single file for easy Web browser inclusion. No more having to think about <script> inclusion order.

Gulp is a task runner, like Make or Rake. The main advantage of Gulp is that Gulpfiles are written in Javascript which means you can leverage server-side Javascript APIs, like npm modules or the Node.js STL. Also, it can do file watching. But that’s for another post.

Anyway, since Browserify has a Javascript API, we can easily incorporate it into our Gulpfile. There is a gulp-browserify plugin and a gulpify plugin that are both designed to make this as easy as possible, but they’re both deprecated. Basically, the browserify API returns a source stream to begin with, so it’s already almost compatible with Gulp’s streaming build model. The only thing we need to do to is convert the browserify stream into a Vinyl file stream using the vinyl-source-stream microplugin.

For now at least, this is what a Gulp browserify task “should” look like:

var gulp = require('gulp'); 
var browserify = require('browserify');
var source = require('vinyl-source-stream'); 
var streamify = require('gulp-streamify'); // optional
var uglify = require('gulp-uglify'); // optional 

gulp.task('browserify', function() {
    browserify('./src/client/app/main.js')
        .transform('coffeeify') // optional -- do browserify transforms
        .bundle()
        .pipe(source('app.js'))
        .pipe(streamify(uglify())) // optional -- minify the output for production
        .pipe(gulp.dest('build/client/'));
});