Generating source maps from browserify using grunt

Question

I have followed the instructions here: https://www.npmjs.org/package/grunt-browserify, to try and set up source maps for browserify on grunt. The options for browserify in my gruntfile are :

browserify: {
            options: {
                bundleOptions : {
                    debug: true 
                }
            },
            dist: {
                files: {
                    "public/client.bundle.js": ["bundle.js"]
                }
            }
        }

The generation of bundle.js happens without any issues, however the source map generation does not happen. Is there anything wrong with my grunt-browserify options.

Thanks for looking.

Answer 1

use browserifyOptions instead of bundleOptions

browserify: {
   options: {
      browserifyOptions: {
         debug: true
      }
   },
   ...
}

Answer 2

By default, browserify generates inline source maps as a comment in bundle.js. Browserify's README suggests using exorcist if you want to extract them to a separate file:

$ browserify main.js --debug | exorcist bundle.js.map > bundle.js 

And grunt-extract-sourcemap rolls this up in a grunt task