Getting Started with Grunt

6th August 2017

Grunt is a JavaScript task runner used to automate tasks such as minifying assets, compilation and other repetitive tasks. Getting started with Grunt is easy: simply install the CLI, create a package.json and a Gruntfile file, and run the Grunt command.

To install the CLI on your machine and allow the use of running the grunt command, run the below command in Terminal. (Note that you may need to run the command using administrator privileges).

$ npm install -g grunt-cli

A Grunt project should have two files: package.json, which lists the project’s dependencies, and a Gruntfile which will either be a Gruntfile.js or Gruntfile.coffee file. This file will be used to define tasks and load plugins.

Add the following into your project’s package.json file.

{
  "name": "my-grunt-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

And run the npm install command, which will download the Grunt packages into a node_modules directory within your project.

A basic project could contain the following folder and file structure:

js/
    script.js
    script2.js
node_modules/
    grunt/
    grunt-contrib-jshint/
    grunt-contrib-nodeunit/
    grunt-contrib-uglify/
Gruntfile.js
index.html
package.json

Supposing you want to minify script.js and script2.js into a single file? Uglify can be this for you.

Uglify, used via Grunt, might be configured in the Gruntfile.js file like so:

// Gruntfile.js

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: ['js/script.js', 'js/script2.js'],
                dest: 'js/scripts.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

The configuration for each task belongs in grunt.initConfig() method. The build property specifies the src, which is the location of the files to be minified, and dest, the destination of the minified file.

The banner option, prepends a string to the minified file. So in this example, the minified file would contain this string at the top of the file:

/*! my-grunt-project 2017-08-06 */

In order to run tasks, the plugins must be loaded. Hence a grunt.loadNpmTasks('grunt-contrib-uglify'); line is added.

The task itself can be run by simply running grunt in the command line. This is because the uglify task has been added as a default task using:

grunt.registerTask('default', ['uglify']);

If it had not been configured as a default task, the task would also have to be specified in the command.

$ grunt uglify

When the command has been run, a minified JavaScript file will be created within your project’s js/ directory.

Should you need to log information using Grunt, you can use grunt.log.write().

grunt.log.write('Some logging information')

This information would then be output in the Terminal when running the grunt command.

There are many more plugins to be used with Grunt, such as JSLint and LESS to CSS compilation. Further plugins can be easily installed by running npm install <package-name> in your project’s directory, loading the task using grunt.loadNpmTasks() within your Gruntfile, and finally, adding the configuration within grunt.initConfig().