Generating Javascript Source Map Files with grunt and grunt-contrib-requirejs

11.18.13 update: looks like jquery has removed sourcemap comments from the 1.11.0/2.1.0 beta

One of the coolest things about being a developer is seeing how other people come up with different (and better!) solutions to the same problem.

Case in point: my original, pre-gruntjs minification scheme involved using the YUI compressor via the Sublime build system. Open a javascript file, hit cmd + b, et voilà! Minified javascript.

One problem, though, was troubleshooting script. If something went awry, the error in my javascript console was invariably on line 1 and in the midst of a bunch of minimized gobbledygook.

My initial solution to this problem was a schema involving an application.environment variable set to 'dev', 'test', 'live' or whatever, a check for that variable in my requirejs config, and the subsequent setting of script paths to either a 'src' folder (to the original version of a file) or a 'dist' folder (the minified version).

This works just fine but, as I hinted above, someone came up with a different (and way better) solution: source maps.

A source map, as the name implies, maps the source of a minified javascript file, so troubleshooting error messages in your javascript console is way easier.

The next question, naturally enough, was "how do I go about generating one?"

Since I've been using grunt, and specifically the grunt-contrib-requirejs plugin, to concatenate and minify my javascript, I decided to start there.

Sure enough, a bit of poking about the r.js build options, I found the generateSourceMaps attribute. I put this into my requirejs options in my gruntfile, ran grunt, and got the following error:

Error: Cannot use preserveLicenseComments and generateSourceMaps together. Either explcitly set preserveLicenseComments to false (default is true) or turn off generateSourceMaps. If you want source maps with license comments, see: http://requirejs.org/docs/errors.html#sourcemapcomments  

Following the error link, it seems you can use jsdoc-style @license comments.

In any case, setting preserveLicenseComments to false in my build options resolved the error, and after running grunt again, I was happy as a very happy clam to see a series of source maps show up for my minified files:

source maps

Yahoo! How easy peasy is that?

Here's the modified gist (which I worked up here):

Update

Looks like jquery has removed sourcemap comments from the 1.11.0/2.1.0 beta (though you can still add them manually):

Sad sourcemap story

One of the changes we’ve made in this beta is to remove the sourcemap comment. Sourcemaps have proven to be a very problematic and puzzling thing to developers, generating scores of confused questions on forums like StackOverflow and causing users to think jQuery itself was broken.

We’ll still be generating and distributing sourcemaps, but you will need to add the appropriate sourcemap comment at the end of the minified file if the browser does not support manually associating map files (currently, none do). If you generate your own jQuery file using the custom build process, the sourcemap comment will be present in the minified file and the map is generated; you can either leave it in and use sourcemaps or edit it out and ignore the map file entirely.

We will be encouraging browser makers to come up with better ways to handle sourcemaps for situations like jQuery’s, where there are widely distributed files on CDNs. We’d like sourcemaps to be robust and gracefully handle situations like file renaming or missing files. See our bug ticket for more information.  

The funny thing about it is that a source map error from jquery in my javascript console is exactly how I found out (and got excited) about source maps in the first place, so I don't view this as a bad thing, but looks like it's been causing a fair bit of confusion, at least in the jquery community.