Install Grunt and Grunt-cli on Ubuntu 16.04

By
Giuseppe Molica
Install Grunt

Introduction

Grunt is a JavaScript task runner, which helps in performing repetitive tasks like minification, compilation, unit testing, and linting. This means that a developer can save time and spend it doing more useful development work.
It can be configured through Gruntfiles, and extended with plugins.
This tutorial explains how to install Grunt and Grunt-cli on Ubuntu 16.04.

Getting started

Grunt and Grunt plugins are installed and managed via the Node.js package manager, npm. So, the first thing to do is install Node.js.
Node.js is available in the Ubuntu repository, with its required dependencies:

# apt install nodejs npm

If a more recent version is needed, there is a PPA, maintained by NodeSource; in this case:

$ cd ~
$ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh

then, execute the downloaded script:

# bash nodesource_setup.sh

This will set up the repository. Once this process is complete, insert the following code:

# apt install nodejs

In this case, it’s not necessary to install npm separately.
Check that the nodejs version is 6.x.x:

$ nodejs --version

and npm 3.x.x:

$ npm --version

Installing Grunt and Grunt-CLI

Check if npm is up to date:

# npm update -g npm

This should update npm to a 4.x.x version. At this point, it’s possible to install Grunt and its CLI:

# npm -g install grunt
# npm -g install grunt-cli

The job of the Grunt CLI is to run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

Testing Grunt

A Grunt setup involves adding two files to a project:

  • package.json: used by npm to store metadata for projects published as npm modules. Grunt and the Grunt plugin ‘project needs’ will be listed as ‘devDependencies’ in this file.
  • Gruntfile: named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins.

Create a new project

First, create a new folder, like this:

$ mkdir ~/grunt_project

In this folder, execute:

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Then, enter the required information, like project name, author, a git repository, version, etc.
At the end of this process:

About to write to /home/gmolica/grunt_project/package.json:

{
  "name": "grunt_project",
  "version": "0.0.1",
  "description": "This is a Unixmen tutorial.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Unixmen"
  ],
  "author": "Giuseppe Molica",
  "license": "ISC"
}


Is this ok? (yes) yes

Press Enter and it will create a package.json file with all of the information you entered.

Add Grunt to the project

Next, it’s time to add Grunt to this project. The easiest way is:

$ npm install grunt --save-dev

This command will write into package.json a devDependencies block, like:

"devDependencies": {
    "grunt": "^1.0.1"
  }

It will also create a new folder, named

node_modules

containing all required Grunt modules.
The next thing to do is, of course, create the Gruntfile. It is a JavaScript or CoffeeScript file that belongs in the root directory of the project, and that should be committed with the project source.
That file is comprised of the following parts:

  • The “wrapper” function
  • Project and task configuration
  • Loading Grunt plugins and tasks
  • Custom tasks

Let’s see an example of Gruntfile.js:

module.exports = function(grunt) { /*This is the wrapper function*/

  /* Project configuration */
  grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'),
    uglify: { //uglify is a Grunt plugin used in this example
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

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

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

};

It is also possible to define custom tasks right inside the Gruntfile, in the grunt.register Task block, like the following one:

 grunt.registerTask('default', 'Log something', function() {
    grunt.log.write('I'm logging things.').ok();
  });

Conclusion

Of course, this is not a detailed guide, because Grunt is an extensive project (used, for example, by Twitter) with many plugins and a lot of options for per project customization.
But this simple configuration example shows how repetitive tasks can be automated, giving developers more time to work on improving their projects, implementing ideas, etc.