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-uglifyfor more information.

Install this by typing the following:

npm install grunt-contrib-uglify -save-dev

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

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

Running grunt uglify should produce the following output:

Figure 8.8: The console output after running the uglify task

The dist/js folder 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 by our production-ready index.html. We will use grunt...