1. Browserify in the command line

Browserify helps you modularize your client side Javascript code using Nodejs require style. It also supports transforming Nodejs modules on npm to browser compatible ones. You can install browserify using npm

Writing code with browserify is pretty easy and familiar with Nodejs developers. Just write your code in Nodejs require style and then let browserify handle the rest for you. For example you have 2 files, foo.js and main.js with the content like this

• foo.js
• main.js

There is nothing special here. The code is written in Nodejs style and is very easy to understand for Nodejs developers. Of course, this cannot be executed in browsers since they don’t offer the require function. Now we will use browserify to make it compatible with browsers environment. The easiest way is to pack everything to a bundle with browserify

This command will bundle everything you need to run (foo.js, d3-browserify and main.js) to a file named bundle.js. That file can be executed in browser. To use it, simply include it using the <script> tag

However, there is a problem with this command, that is it packs everything in a single file. As a result, every output file will contain all the information about required libraries that it needs. This makes the file size much bigger and the browsers have to reload all those libraries each time it load the new file. To take advantage of browser’s cache functionality, you can use external requires provided by browserify. Back to my previous example, now we will transform foo.js, main.js and d3-browserify to 3 separate files. The content of those 3 files remain unchanged.

• Expose foo.js -> foo-out.js and d3-browserify -> d3-browserify-out.js
• For main.js

In the browser, you need to include all those 3 files

Since you have expose foo.js to a module, in the browser you can also use require

Later when you have another module which uses foo.js, for example bar.js, browserify using -x for referencing to the old file

That’s all the basic commands you need to know to work with browserify. The next part will talk about automate browserify using Gulp.

2. Using Browserify with Gulp

If you haven’t used Gulp before, you should take a look at this post for some basic tasks Automate Javascript development with Gulp.

Update Jun 16 2014: gulp-browserify lacks some of browserify features so I have updated the post to use browserify stream directly

Browserify can be used with Gulp since the object returned by Browserify is a stream compatible with Gulp. However, you need vinyl-source-stream to achieve this.

2.1 Browserify Node and npm packages

To browserify Node and npm packages, for example react on npm, use the browserify APIs and pipe it to vinyl source and gulp dest like this

When you run this task as gulp browserify-lib, it is equal to this command

2.2 Browserify custom modules

It’s similar when you want to browserify the module that you wrote

When you run this task as gulp browserify-modules, it is equal to this command

Here is my sample gulpfile.js

2.3 Browserify client-side libraries

Update Jun 18 2014: before that, I said that we shouldn’t use browserify for client-side libraries. Now, I found the solution.

If the libraries you want to browserify are designed for client-side environment (browsers), do not try to find them on npm and then browserify them to the client. Because for many libraries like jquery, jquery-ui, twitter bootstrap, they relies on global object to work properly. The solution is just load those libraries through the script tag like the traditional way that we used to do (can also be installed with a package manager like bower) and use browserify with literalify transform to pretend those libraries are actual CommonJS modules.

This is an example with Jquery, Twitter Bootstrap and ReactJS installed through Bower

• The HTML file, just load all those libraries via script as you usually do
• main.js
• gulpfile.js

2.4 Auto browserify when there are changes

Update Aug 06 2014: for watching Browserify bundle files, do not use gulp.watch, instead, use Watchify for that task. You can read about it here Using Watchify with Gulp for fast Browserify build.

2.5 Browserify when files is in sub folder

Note: if you are placing the your files under a sub folder of your app’s root directory(of course usually you do), you need to set the basedir for browserify, for instance

Now you can run all those previous commands normally from our Nodejs app root directory.

2.6 Sample gulpfile.js

Here is my sample gulpfile.js which combine all of the above things