Search code examples
node.jsgruntjsgrunt-contrib-concat

Debug concat/minified files with Grunt


I'm using grunt concat/uglify to reduce the number of calls being made to load JavaScript.

I removed all the hard-coded links to the actual javascript files, and now reference the one javascript file produced by grunt.

how can I continue to debug/view my javascript in my development environment? Is that what source maps are?

i.e. https://www.npmjs.org/package/grunt-concat-sourcemap


Solution

  • Yes. You will need to generate a sourcemap to continue debugging your code easily.

    There are two types of sourcemap, but the sourcemaps need to be maintained through each transition. SO if you concat in one step an minify in a second step, the minify process needs to know that the concat step generated a sourcemap and generate it's own sourcemap based on that sourcemap, so that the minified code sourcemap corresponds to the original input, not the input from the concat step.

    There are several ways around this -- the easiest way is to just not minify in your test/deveopment environment. There are also minifiers that will do the sourcemapping correctly for you, but they can be hard to configure.

    You might also want to take a look at browserify -- this is a tool that lets you write your front-end browser code like it was node modules, and it will concat and generate sourcemaps for you!

    Alternatively you can also just rely on gzip compression from your server and run your code through a minifier -- this works surprisingly well.