loading...

Bootstrap 4 – 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 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-processhtml, which we installed in the previous section. All that we need to do is wrap our link tags inside a special build comment—<!-- build:js js/myphoto.min.js ->:

    <!-- build:js js/myphoto.min.js --> 
        <script src="js/alert.js"></script> 
        <script src="js/carousel.js"></script> 
        <script src="js/a11yhcm.js"></script> 
    <!-- /build ->

Next, we will add our uglify task to our watch task list:

"watch": { 
    "target": { 
        "files": ["src/styles/myphoto.css"], 
        "tasks": ["uncss", "cssmin", "processhtml", "uglify",
        "copy"], 
    } 
}, 
Golden rules when working with Grunt

When developing a Grunt file (or any build file for that matter), there are a few practices that you should keep in mind:

  • The dist folder should not contain any unprocessed source files, src is the “unprocessed” code, and  dist is the result of “processing” src to create a distributable.
  • Typically, you should create a G runt build task to run the appropriate tasks to create and populate the dist directory. You should also create a G runt serve task to run the appropriate tasks for a development server, with the watch task being the final task that is run.
  • The watch task should be watching all source files. In our case, we watched just one, in order to keep the example simple and easy to understand.

Comments are closed.

loading...