Installing and Using GruntJS

Installing Grunt

Step 1 – Install Node.js

Windows Users: Download and Install node.js onto your computer.

Mac Users: I recommend you do this via home-brew as opposed to downloading it from the official website. This will enable you to easily uninstall later, if you wish. Installing it using the official node.js website will result in multiple files being scattered in various places. This makes it a pain to uninstall as you will have to manually find and delete these files individually. Here’s a step by step guide on how to install node.js using home-brew

Step 2 – Install grunt cli

Install grunt cli globally by running the following command:

npm install –g grunt-cli

Step 3 – Install The Package Manager

Go into your website project root directory and install the package manager. Doing this will create a file called package.json file.

At a project level run the following command:

npm init

This will walk you through the project name, version etc etc.

Step 4 – Install grunt to your project root

Go into your website project root directory and install grunt. You need to install grunt at a project level in case the version of grunt changes when you are using grunt in a project. You will notice that the package.json file updated adding grunt as a dependency. You will also notice a node_modules folder. You will need to manually create a gruntfile.js, this is where you will control the modules etc

Install grunt by running in the following command within your website project root directory:

npm install grunt –-save-dev

Step 5 – Create the grunt file

Create a file called gruntfile.js at the website project root level. This will contain a node.js module which will control what grunt packages you web project uses and their settings.

Add the following code to the gruntfile.js file:

module.exports = function(grunt) {

 // configure task(s)
 grunt.iniConfig({

 });

 // load the plugins
 grunt.loadNpmTasks( );

 // Register task(s)
 grunt.registerTask('default', []);
 
};

Using Grunt

Now we need to add a task to grunt. We do this by carrying out the following steps:

• Load the plugin

  npm install <plugin-name> --save-dev

• Add congifuration to gruntfile.js
• Load plugin in gruntfile.js
• Register the task

We will use a plugin called uglify. This will shrink your javascript files down by compressing them and renaming variables to their smallest possible instance, amongst other things. It will also combine your javascript files into one single minified file.

Lets load the plugin:

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

Now lets configure the plugin within grunfile.js. Before doing this, ensure that you have your website folder structure in place where you can keep your non minfied javascript files seperate from you distirbution files.

In the example below we have our dev files in the src folder and our distribution files on the dist folder

/projectRoot/src/js/

/projectRoot/dist/js/

We can now add the uglify configuration to the grunfile.js file

module.exports = function(grunt) {

    // configure task(s)
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            // method within plugin
            dist: {
                src: 'src/js/*.js',
                dist: 'dist/js/script.min.js'
            }
        }
    });

    // load the plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Register task(s)
    grunt.registerTask('default', ['uglify:dist']);
};

The above uglify configuration will copy all js files within /src/js/ compress them and save the compressed version to /dist/js/script.min.js
In the example aboce we have set

uglify:dist

as the default task.