Concatination And Compressing Files With Grunt

• Abstract
• Installing Grunt
• Concat Files With Grunt
• Compress Files With Grunt
• Credits

Abstract.

Grunt is a tool which allows developers to run tasks and to minimise and compress CSS and Javascript. The use of Grunt has become quite popular as it allows developers to group CSS and Javascript into small chunks of code, which Grunt can compress into a singel, minified, version.

Installing Grunt

Grunt uses Node as its backbone, so firstly, Node needs to be installed. Fortunately, this is quite simple, at least with ubuntu which this tutorial is using.

OK, now node is installed, Grunt can be installed in a per-project manner. First, lets create a simple project. For the purposes of this tutorial, the structure will be as follows

index.php

style.css

tute.js

more.js

The above files create a basic project, which consists of a single stylesheet, and two javascript files, plus the jquery library, along with the index.php file which calls them. The two javascript files contain different logic for different parts of the page, and so are kept seperated for ease of maintenance. However, when this goes into production, each of the files, and the number of Javascript files could be many, requires a seperate request, and the filesize of each javascript file could be large. This is where Grunt shines.

Grunt is a task runner, so it needs to know what to do. The instructions to direct Grunt are stored in a file named package.json. To get started, lets create a basic file. In the root of the project, create a file named package.json and in it put the following code.

package.json

With the package.json file created, the npm (Node Package Manager) command is used to create node modules package.

When the npm install command is run, the output will look something like this

$ npm install
npm WARN package.json my-project@0.0.1 No description
npm WARN package.json my-project@0.0.1 No repository field.
npm WARN package.json my-project@0.0.1 No README data
grunt@1.0.1 node_modules/grunt
├── path-is-absolute@1.0.0
├── grunt-known-options@1.1.0
├── eventemitter2@0.4.14
├── rimraf@2.2.8
├── exit@0.1.2
├── iconv-lite@0.4.13
├── coffee-script@1.10.0
├── grunt-cli@1.2.0 (resolve@1.1.7)
├── nopt@3.0.6 (abbrev@1.0.7)
├── minimatch@3.0.0 (brace-expansion@1.1.3)
├── glob@7.0.3 (inherits@2.0.1, once@1.3.3, inflight@1.0.4)
├── findup-sync@0.3.0 (glob@5.0.15)
├── js-yaml@3.5.5 (esprima@2.7.2, argparse@1.0.7)
├── grunt-legacy-util@1.0.0 (getobject@0.1.0, hooker@0.2.3, async@1.5.2, underscore.string@3.2.3, which@1.2.4, lodash@4.3.0)
├── dateformat@1.0.12 (get-stdin@4.0.1, meow@3.7.0)
└── grunt-legacy-log@1.0.0 (hooker@0.2.3, colors@1.1.2, underscore.string@3.2.3, lodash@3.10.1, grunt-legacy-log-utils@1.0.0)

The npm install command will create a directory named node_modules, inside of which is a module named grunt. Grunt will be run from the command line, and so needs to be told so with the following command.

$ sudo npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@1.2.0 /usr/local/lib/node_modules/grunt-cli
├── grunt-known-options@1.1.0
├── resolve@1.1.7
├── nopt@3.0.6 (abbrev@1.0.7)
└── findup-sync@0.3.0 (glob@5.0.15)

And then another package needs to be added which grunt will use to concat files together, to create a single master file.

$ npm install grunt-contrib-concat --save-dev
npm WARN package.json my-project@0.0.1 No description
npm WARN package.json my-project@0.0.1 No repository field.
npm WARN package.json my-project@0.0.1 No README data
grunt-contrib-concat@1.0.1 node_modules/grunt-contrib-concat
├── source-map@0.5.3
└── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, has-ansi@2.0.0, strip-ansi@3.0.1)

Whilst the output does not seem too exciting, behind the scenes, the package.json file has been updated to include this line.

Now grunt is ready to go.

Concat Files With Grunt

In the above section, the grunt-contrib-concat module was added to enable the concatenation of multiple files. The my-project project has three Javascript files, including the jquery library.

Grunt uses the grunt command to concat the file, and needs a Gruntfile.js in order to know what to do when the grunt command is run. The Grunfile.js will look like this for the my-project project.

Now, we simply run grunt.

Now the contents of the file have all be concatenated into a single javascript file named my-project.js.

So now the files are all bundled into a single javascript file, there needs to be only a single call from the server to include it, rather than the three calls initially made with the index.php file.

This is great, however, the filesize is still the same as having three individual files. So lets minify (uglify) them to reduce the file size.

Compress Files With Grunt

Compressing the javascript files is as simple as concatination with a few simple tweaks to the Gruntfile.js.

Node npm uses grunt-contrib-uglify to do the compression, so this module needs to be installed, in the same way the concat module was installed.

With the plug-in installed, the Gruntfile.js just needs to know that the plug-in is installed, and to use it to minify the source files.

module.exports = function(grunt) {

        // Configuration needs the name of package.json file 
        grunt.initConfig({
                pkg: grunt.file.readJSON('package.json'),

        // Set the source and destination of the javascript files
        concat: {
                dist: {
                        src: [
                                'js/*.js'
                        ],
                        dest: 'js/my-project.js',
                }
        },
        uglify: {
                build: {
                        src: 'js/my-project.js',
                        dest: 'js/my-project.min.js'
                }
        }

        });

        // tell grunt which plugins to use
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');

        // Tell Grunt what to do when the grunt command is run
        grunt.registerTask('default', ['concat', 'uglify']);

};

And once again, simply run the grunt command.

The output tells that 1 file has been created, and a quick look in the js directory shows the my-project.min.js file is there, and can be loaded in place of all other js files saving on requests and on loading times.

Credits

Thanks to the artist formerly known as Prince.