JavaScript file concatenation

Just as we minified and concatenated our style sheets, we shall now go ahead and minify and concatenate our JavaScript files. Go ahead and take a look at grunt-contrib-uglify. Visit https://github.com/gruntjs/grunt-contrib-uglify for more.

Install this by typing:

sudo npm install grunt-contrib-uglify -save-dev

And, as always, enable it by adding grunt.loadNpmTasks('grunt-contrib-uglify'); to our Gruntfile.js. Next, create a new task:

    "uglify": {  
        "target": { 
            "files": { 
                "dist/src/js/myphoto.min.js": ["src/js/*.js"] 
            } 
        } 
    } 

Running grunt uglifyshould produce the following output:

Figure 8.8: The console output after running the uglify task

The folder dist/js should now contain a file called myphoto.min.js. Open it and verify that the JavaScript code has been minified. As a next step, we need to be sure that our minified JavaScript file will actually be used...