34

I use concat to merge JS files into one file and uglify to minimize the JavaScript. How can I create a sourcemaps file that uses the source JS files?

My current gruntfile:

concat: {
    options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
    },
    dist: {
        // the files to concatenate
        src: ['<%= config.src %>/js/**/*.js'],
        // the location of the resulting JS file
         dest: '<%= config.dist %>/js/main.js'
    }
},

uglify: {
    dist: {
        files: {
            '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
        }
    }
},
Volker E.
  • 5,443
  • 11
  • 43
  • 62
user3483982
  • 393
  • 1
  • 3
  • 6

2 Answers2

56

You need to enable source maps on both the concat and uglify tasks, and you must specify the sourceMapIn option for the uglify task.

Here's a sample grunt config:

concat : {
  options : {
    sourceMap :true
  },
  dist : {
    src  : ['www/js/**/*.js'],
    dest : '.tmp/main.js'
  }
},
uglify : {
  options : {
    sourceMap : true,
    sourceMapIncludeSources : true,
    sourceMapIn : '.tmp/main.js.map'
  },
  dist : {
    src  : '<%= concat.dist.dest %>',
    dest : 'www/main.min.js'
  }
}
Alex Ilyaev
  • 1,202
  • 1
  • 13
  • 17
Damon Friendship
  • 791
  • 5
  • 8
  • This answer has been helping resolve a similar requirement (mapping uglify source to require source to individual require modules). Thanks! – jerome Mar 25 '15 at 18:02
  • 1
    This is working for me except the line numbers are wrong in the final map when using the minified js (chrome's console will point to line 320 for an error instead of line 290 for example). Do you have any idea why this is happening? – Y0lk Jan 19 '16 at 17:05
  • 1
    In my case the source maps are generated but unusable. When I set a breakpoint the code does not stop there. Seems like a general problem of uglifyjs that is not solved yet. – crackmigg Feb 03 '16 at 07:29
  • Y0lk, Are you adding a banner that happens to be 30 lines long? – user1082202 Apr 27 '16 at 13:25
  • 3
    The `sourceMapIn` can be more conveniently specified as (based on https://stackoverflow.com/questions/14207983/how-to-specify-multiple-source-maps-in-uglify-grunt-task): `sourceMapIn: function(path) { return path + ".map"; }` which is more generic and also supports multiple source files. – Jonas Berlin May 04 '16 at 13:34
  • 1
    Did anyone find a solution to the problem that it doesn't stop on breakpoints ? I am having the same issue. Everything seems to be working fine, but when I try to stop on breakpoints it just doesn't stop. – Biri Mar 04 '18 at 16:57
-1

Per the grunt-contrib-uglify docs, you can enable sourcemap generation as part of the uglify process.

Your uglify config would look something like:

uglify: {
        dist: {
            files: {
                '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
            },
            options: {
                sourceMap: true
        }
    },
Matthew Bakaitis
  • 10,230
  • 6
  • 37
  • 46