Keegan Berry, DSCN8833

Introduction to Gulp.js 5: Bundling JavaScript with Browserify

This is the 5th part of my series Introduction to Gulp.js. Today I will show how to use Browserify to bundle your JavaScript and use CommonJS modules to run node modules in the Browser.

Browserify

This task is a little more complex, because I use Browserify to bundle my JavaScript. If this is too complex for your needs you may just use gulp-concat to concatenate all your JavaScript files into one file.

Browserify is an awesome tool, which allows you to use node modules in your browser. Over 70% of the node modules will run right away! And it will bundle up all of your dependencies. If you want to find out more about writing CommonJS modules for Browserify have a look into the documentation.

This task I saw in the gulp-starter. It’s quite long but clever. It allows to create multiple files with Browserify. I create two files. One file is loaded in the head of my website containing Modernizr and one file with the rest of my JavaScript at the bottom.

Creating JavaScript files with Browserify

Install the node modules needed for this task:

$ npm install --save-dev browserify@11.2.0 vinyl-source-stream@1.0.0 watchify@3.4.0 gulp-util@3.0.1 pretty-hrtime@1.0.1 gulp-notify@2.0.0

Create the entry in the config.js file:

gulp/config.js
gulp/tasks/development/scripts.js

This task has some additional utilities for handling errors and logging the bundling process. Put these into a util folder in your gulp folder:

gulp/util/bundleLogger.js
gulp/util/handleErrors.js

Using CommonJS Modules

Writing CommonJS modules is quite nice. You just export your function, object, string, integer or whatever you like to export as a module or just individually:

math.js
navigation.js

Later you import your modules and use them:

increment.js
application.js

Loading non-CommonJS files

But one problem remains: How do I use JavaScript files, which aren’t written in CommonJS syntax? Like Modernizr oder jQuery?

I need to install browserify-shim:

$ npm install --save-dev browserify-shim@3.8.0

I open my package.json file and need to add a few lines:

package.json

In the section “browser” you point browserify-shim to the asset you want to shim. I use Bower and have installed my packages into app/_bower_components/. The name you choose is the name you have to require later in your JavaScripts.

Within “browerify-shim” you decide where to map this require to. To include jQuery or Modernizr later you would write:

app/_assets/javascripts/head.js
app/_assets/javascripts/application.js

You have to run npm install once you added a new entry to your package.json file.

Source Code

View Source on GitHub

Conclusion

This concludes the 5th part of my series Introduction to Gulp.js. We learned how to use Browserify to bundle JavaScript files, how to use CommonJS modules to run node in your Browser, and how to use non-CommonJS JavaScript files.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.