Todd Wolfson

Software Engineer

October 07, 2012

Introducing JSMin with sourcemaps -- available as a node module and as a grunt plugin.

Example

grunt.js example

// Load in the jsmin-sourcemap task
grunt.loadNpmTasks('grunt-jsmin-sourcemap');

// Set up our grunt config
grunt.initConfig({
  'jsmin-sourcemap': {
    all: {
      // Source files to concatenate and minify (also accepts a string and minimatch items)
      src: ['public/js/jquery.js', 'public/js/underscore.js'],

      // Destination for concatenated/minified JavaScript
      dest: 'dist/js/all.min.js',

      // Destination for sourcemap of minified JavaScript
      destMap: 'dist/js/all.js.map'
    }
  }
});

node.js example

// Load in jsmin and jQuery
var jsmin = require('node-jsmin-sourcemap'),
    jquerySrc = fs.readFileSync('jquery.js', 'utf8');

// Process the jquery source via jsmin
var jqueryMinObj = jsmin({'code':jQuerySrc,'src':'jquery.js','dest':'jquery.min.js'});

// Minified code is available at
// jqueryMinObj.code;

// Sourcemap is available at
// jqueryMinObj.sourcemap;

Modules

Out of this, I have written 4 new node modules:

Journey to sourcemap glory

Below are the steps I have taken along the path to sourcemap glory.

  • Fork node-jsmin and progressively rewrite to understand inner workings (not on master)
  • After understanding the majority, I began to attempt to hack in pointers.
  • Then, I became frustrated at pre-mature string concatenation and decided to rewrite jsmin.
  • As a result, I took the latest JSMin from Crockford himself and created a set of string macros which converted it into JS.
  • Then, I took the low level JSMin + coordinate map and used them inside of node-jsmin-sourcemap.
  • However, I could not directly use character indices with the source-map repo.
  • As a result, I created another module (char-props) which assisted in looking up lines and columns of indicies.
  • Once all of that was said, done, and tested, I moved on to the grand finale of grunt-jsmin-sourcemap.

Enjoy JSMin + sourcemaps!

Top articles

Develop faster

Removing the tedium from creating, developing, and publishing repos.

Sexy bash prompt

A bash prompt with colors, git statuses, and git branches.

Recent articles

Testing the Invisible

How to test/prevent elements invisibly blocking other elements