How can I disable UglifyJS chaining declarations with commas. I cannot use Breakpoints

Question

UglifyJS uses commas to chain function, object and variable declarations. This is fine for productions and when the file is being minified however it makes it extremely hard to walk through the javascript with breakpoints when debugging js. I need to know how to turn this feature off in the UglifyJS Grunt Plugin.

Below is what the output looks like.

var boom = function(a) {
  ...
},
bing = function(b){
  ...
},
bam = function(c) {
  ...
};

Levitan

If you have sourcemaps all the way why would you need to put breakpoints into uglified code? – Exegetics

To walk the javascript. I've got a pretty complex data modal going on. – Levitan

Also it's just nice see how your javascript runs with breakpoints. No need for console.logs or debugger statements. I find it a lot neater. – Levitan

I found the option for UglifyJS now to figure out how to make it work with Grunt. github.com/mishoo/UglifyJS2#compressor-options – Levitan

I have sourcemaps. Also it's good practice to setup the entire grunt build process first rather than just before going live. – Levitan

Answer 1

Ok I figured it out. In the the Gruntfile under options > compress add an option

sequences: false

that will stop the semi-colons being replaced with commas. You can then use breakpoints like you would normally.

uglify: {
    options: {
        compress: {
            sequences: false
        }
    }
}

Levitan

Answer 2

This might help Gulp users using gulp-uglify :

  .pipe( uglify({
    compress:{
      sequences:false
    }
  }) )

Mariannamarianne

Answer 3

This might help users of HTML Minifier which uses UglifyJS under the hood:

const htmlmin = require('gulp-html-minifier-terser'); // new fork of gulp-htmlmin

.pipe(htmlmin({
    collapseWhitespace: true,       // etc.
    minifyJS: {compress:{sequences:false}}, 
});

I found you can pass through Uglify options via the minifyJS instead of just true which uses all the defaults.

Whichever