Source Maps

In this post i will talk a little about source maps - what are they and which problem they solve, and how to get them in your project.
So, if you sitting comfortably - lets begin

Minification

It pretty common that in nowadays project all javascript files are minified (or uglyfied) and concatenated into one file. Why?
Because to have project devided to many files(although it is convenient for developers) makes loading process slower (less performant).
Also it is a good practice not to expose your javascript logic to everybody...
But what about debugging the minified code? is it possible?

Source Maps

The answer is - yes, but (there is always a catch!) you must first configure the source map task to run alongside with magnification task. Source maps - are files (decorated with .map extension) which generated during uglification, which are (citing from this great guy) - links pieces of your minified bundle back to the original, unbuilt files.

How to get it work inside you project?

That is easy: Assuming that you have minification task run by Grunt-contrib-uglify task, all you need to do is to add following option:

...
uglify: {
    dist: {
        src: ['<%= src.js %>'],
        options: {
            sourceMap: true // - this will do the magic!
        },
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    }
},
...

And now, after running grunt build task (which includes uplifting) you can see in your distilled folder the ".map" files and ,once you open your chrome dev tools and try to search for some line of your code - you will see the following picture:

Thats all - now you have source maps in your project...

One more trick

Of course - source maps are good as long as we talking about dev environment. In order not to create them at your production environment you can use conditional configuration:

...
uglify: {
    dev: {
        src: ['<%= src.js %>'],
        options: {
            sourceMap: true
        },
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    },
    prod: {
        src: ['<%= src.js %>'],
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    }
}
...
grunt.registerTask('prod', ['recess:min', 'uglify:prod', 'copy'])

Now, for production build you can simply call:

 node_modules/.bin/grunt prod