grunt: jshint after uglify generating warnings

Question

I hunted on here, and a fairly lengthy google search, and can't see anything obvious, though I caveat that with this being the first time I've worked with jshint/uglify and grunt.

I have (for sake of terseness) 2 test JS files:

(function() {
console.log("I'm in your build, testing your stuff (1)");
})();

and

(function() {
console.log("I'm in your build, testing your stuff (2)");
})();

my grunt file does a number of build tasks, but essentially I run jshint twice - once on the src (stop early if there are issues) and once after all the concat/uglify to ensure that the final files output still pass.

jshint on the source (above) works a treat, but jshint post 'build' seems to fail because uglify has removed a couple of semicolons.

the pertinent parts of my grunt file (for ref):

jshint: {
        jshintrc: '.jshintrc',
        source: {
            files: {
                src: ['app/common/scripts/**/*.js',
                        'app/games/**/*.js'
                ]
            }
        },
        dist: {
            files: {
                src: [ 'dist/' + targetEnvironment + '/common/scripts/**/*.js',
                        'dist/' + targetEnvironment + '/games/**/*.js'
                ]
            }
        }
    },
concat: {
    scriptsCommon: {
                src: [  'app/common/scripts/*.js',
                ],
                dest: 'dist/' + targetEnvironment + '/common/scripts/common.concat.js',
                nonull: true
            }
        },
uglify: {
            all: {
                files: [
                    {   src: 'dist/' + targetEnvironment + '/common/scripts/common.concat.js',
                        dest: 'dist/' + targetEnvironment + '/common/scripts/common.min.js' },
                ]
            }
        }

and my grunt task that runs is essentially (again, cut down for the example):

    grunt.registerTask('default', [
        'jshint:source',
        'concat:scriptsCommon',
        'uglify:all',
        'jshint:dist'

jshint:source works a treat, jshint:dist doesn't and complains about missing semicolons.

The uglify'd script (for reference) is:

!function(){"use strict";angular.module("TestingStuffs",[]).controller("TestController",["$http","$log",function(){}]).controller("Test2Controller",["$http","$log",function(){}])}(),function(){console.log("I'm in your build, testing your stuff (1)")}(),function(){console.log("I'm in your build, testing your stuff (2)")}();

as you can see, both console.log statements have had their semicolon's removed - safely it seems. I can understand why uglify has done this, and I can also understand why jshint is complaining about it.

Ideally, I'd want to modify uglify so that it leaves the semicolon in (though I may earn ire from the semicolon police for that) though ideally I'd love to see options for both - getting jshint to ignore the semicolon issue, but also getting uglify to leave it in.

Any help gratefully appreciated!

Cheers, Terry

Answer 1

I don't think that JSHint should be run on the uglified/concat output but just the input. JSHint is a syntax checker to eradicate human error and uglify will obviously attempt to reduce file size down to a minimum.

From JSHint.com:

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions...The goal of this project is to help JavaScript developers write complex programs without worrying about typos and language gotchas

Obviously this means you must place a lot of faith in the uglify task and what modifications it makes to your code. However running your unit tests (assuming you have them) on the uglified code will increase confidence and identify any issues.