Getting Started with Gulp, Browserify, and npm

I started using Gulp and Browserify lately and, quite frankly, they’re great.  However, transitioning to a new build system is not without its pain points, no matter if you’re moving from something like Grunt or if you’re adding your first build tool to an existing project.  The documentation is good and Gulp itself is easy to use, but most of the browserify examples are geared toward simpler projects where only one bundle is needed.

For example, if you’re creating a website of any significant size, there are likely to be multiple pages with varying functionality. You don’t want to create one giant bundle that contains your entire site’s JavaScript. Monoliths are bad, mmmkay?  With that in mind, here are the main points that we’ll be walking through:

That’s a lot of stuff to cover.  As the title of this article implies, I’m assuming that you’re starting from zero.  If you already know a little about npm, gulp, or browserify, you can probably safely skip ahead.  TL;DR: If you’re already decently acquainted with all of these tools, then you can just take a look at my gulpfile.js. … 

 

Generic Singleton Factory in JavaScript

I recently contributed this little tidbit to stackoverflow’s Hidden Features of JavaScript and thought it would be best to elaborate it on it fully. In a recent client project, I needed a generic method to produce singleton instances of interface widgets.  This is the method that I came up with and it works pretty well. Before we begin, these are not singleton classes in the normal sense, but a generic singleton factory. … 

 

Magento Onepage Checkout Template Bug

Recently, we rolled out an installation of Magento 1.3.2.3 for one of our clients but ran into small a problem along the way. Being an established open source project, I initially assumed that the error was my own when I found that the onepage checkout process would stop working half way through (step 3 to be exact).  However, after digging around, I found that the problem was actually a bug in Magento’s JavaScript.  The bug has been reported and will hopefully be fixed soon, but in the meantime, here’s the fix and how I found it. … 

 

Semicolon insertion finally caught me

While debugging a caching class today, I realized that I had finally been caught by semicolon insertion.

Here’s the original code cut from a larger object literal

After about 10 minutes and a gratuitous amount of debug output, I realized that this function was returning undefined.  “Nonsense,” I said to myself, “it’s returning a boole…wha…wait. Dammit.”

In my effort to document and format at the same time, I dropped the expression to the next line after the return.  Being that return by itself on a line is a complete and valid expression, JavaScript’s automatic semicolon did its thing and ended the statement there and my conditional expression was never evaluated.

Wrapping the whole conditional expression in parenthesis fixed the problem by invalidating the return line as a whole statement.

Let that be a lesson to us all. I suppose it was bound to happen at some point.