Browserify: Easing the Development Process
Welcome to Part 2 of this review of the Pluralsight course Creating JavaScript Modules with Browserify by Jeff “coding with spike” Valore.
Jeff has over 15 years of experience in software development including Java, C#, JavaScript, CoffeeScript, and TypeScript.
His belief that clean, well-organized code is key to making software maintainable has led him to focus on unit testing and solid programming practices and principles as a cornerstone of everyday coding.
He is also the author of Require JS: Dependency Injection and Module Loading
Easing the Development Process: Introduction
We are having to do too many steps just to make and test simple changes. How can we make this easier?
Source Maps
It can be very difficult to track down problems is bundled code, especially if it is minified as well. Source maps reconstruct the original files for you, and are supported by all modern browsers. Treehouse have a nice introduction to source maps here, and Jeff also explains them for you in this clip.
Browserify can generate a source map for us. Jeff explains that, unlike some other tools which create them as an external file, it puts the source map inside our bundle.js file.
We see that the generated source map is in the form of a specially formatted comment at the end of this file.
Because it increases the size of the bundle, Jeff recommends excluding source maps from our production builds.
Watchify
This watches a set of files for changes and re-runs Browserify when a change is detected. This is installed using npm.
Once installed, we use the watchify command instead of browserify. Jeff demonstrates this and we see watchify spring to life and recreate the bundle when any watched file is saved.
Grunt Browserify
Build task runners such as Grunt and Gulp can be useful as your build process gets more complicated. (An alternative is to use Webpack — see Webpack Fundamentals for details).
Jeff generally uses Grunt with Browserify, and introduces us to the basics here, explaining what it is and how to install it.
We see how to find out what version of Grunt we are using, and we are introduced to gruntfile.js.
As Jeff writes out the gruntfile.js, we see that it looks similar to our earlier browserify code because both use the CommonJS module.exports syntax.
With the basics understood, Jeff explains how to use Grunt with Browserify. We install the package grunt-browserify.
Jeff demonstrates and explains how to update grunt.initConfig to setup browserify. When this is done we can run grunt by typing “grunt” into the command prompt, and see that it now does the same job as we previously had browserify doing.
For a comprehensive guide to using Grunt JS, you can watch David Mosher’s course Build Process, Workflows and Tooling With Grunt.js and Beyond.
Grunt Watch
Although it’s possible to run watchify from grunt, Jeff prefers to use the Grunt Watch plugin, which is more powerful because it can also automatically run other grunt tasks when any watched file is changed.
Jeff shows how to update our gruntfile.js with our watch configuration options.
Now on the command line we type “grunt watch” to start it. We see that it reruns the grunt tasks as we save a change in taskRenderer.js
Local Web Server
Jeff introduces Grunt Connect, a tool for serving static files from a local web server. He explains how to install it, how to add the connect task to grunt, and which configuration options to set in grunt.initConfig.
Live Reload
If you’re getting sick of installing grunt plugins, you’ll be relieved to hear that the live reload feature, is part of grunt watch, which we already installed earlier.
All we need to do is add:
options : {
livereload: true
}
into our grunt config, as Jeff demonstrates. This creates a new port.
You are best off installing at least one more package however. We need tell the browser to connect to the server, by injecting JavaScript into the HTML page.
Although there are a few different ways to achieve this, Jeff recommends installing the connect-livereload middleware, as this is the easiest way to get it to work.
Jeff shows us how to update our grunt file.
Now that’s all setup, we see this all working together: file changes, grunt watch firing, and the live reload happening at the end of our build.
Continue to Part 3 — Using Transforms and Plugins
