Grunt - Getting Started

In this tutorial we will learn to use Grunt the JavaScript task runner in our web project.

What is Grunt?

Grunt is a task runner. It helps in automating tasks like concatenating files, minifying JavaScript and CSS files etc.

Prerequisite

NodeJS and NPM

In order to use Grunt in our project we will need NodeJS and NPM installed. NPM is a Node Package Manager and we will be using it to install Grunt and its plugins.

Click here to read the tutorial on How to install NodeJS on Mac.

Once you have Node and NPM installed you can check the versions by typing the following command in the terminal.

$ node -v

This will give the node version.

$ npm -v

This will give the npm version.

Install Grunt globally

Once you have Node and NPM it's time to install Grunt. Type the following command to install Grunt globally.

$ npm install -g grunt-cli

Note! You may need to use sudo if you don't have the permissions.

Click here to read the tutorial on how to install Grunt on Mac.

The above command will install Grunt CLI globally making the grunt runnable from any directory.

Installing Grunt CLI does not installs the Grunt Task Runner. The grunt-cli is only there to run the Grunt that is installed in a project.

Now we will discuss how to install Grunt in our project.

Create a project

Let's begin by creating a project folder (say grunt-project). Use the following command in the terminal to create a new directory.

$ mkdir grunt-project

Output

YUSUF-MacBook-Pro:~ yusufshakeel$ cd Documents/yusuf-dev/
YUSUF-MacBook-Pro:yusuf-dev yusufshakeel$ mkdir grunt-project
YUSUF-MacBook-Pro:yusuf-dev yusufshakeel$ cd grunt-project/
YUSUF-MacBook-Pro:grunt-project yusufshakeel$ ls -la
total 0
drwxr-xr-x  2 yusufshakeel  staff   68 Mar 14 15:41 .
drwxr-xr-x  9 yusufshakeel  staff  306 Mar 14 15:41 ..
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

Create package.json file

Now, move inside the project folder and type the following command in the terminal to create a package.json file.

$ npm init

package.json is a file that stores the project's metadata and is used by npm. We will be listing grunt and it's plugins as devDependencies inside the file.

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ 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.

Press ^C at any time to quit.
name: (grunt-project) 
version: (1.0.0) 
description: This is a sample grunt project.
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: Yusuf Shakeel
license: (ISC) 
About to write to /Users/yusufshakeel/Documents/yusuf-dev/grunt-project/package.json:

{
  "name": "grunt-project",
  "version": "1.0.0",
  "description": "This is a sample grunt project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yusuf Shakeel",
  "license": "ISC"
}


Is this ok? (yes) y
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

Note! Do not name your package in package.json file as grunt because then you will not be able to install the actual grunt package.

Create Gruntfile.js

Inside the project folder create a new file and save it as Gruntfile.js

We use the Gruntfile.js file to define task and load Grunt plugins.

$ touch Gruntfile.js

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ touch Gruntfile.js
YUSUF-MacBook-Pro:grunt-project yusufshakeel$ ls -la
total 8
drwxr-xr-x  4 yusufshakeel  staff  136 Mar 14 16:15 .
drwxr-xr-x  9 yusufshakeel  staff  306 Mar 14 15:41 ..
-rw-r--r--  1 yusufshakeel  staff    0 Mar 14 16:15 Gruntfile.js
-rw-r--r--  1 yusufshakeel  staff  253 Mar 14 16:03 package.json

Install Grunt in the project

Use the following command to install grunt in a project and add it as devDependencies in package.json file.

$ npm install grunt --save-dev

This will add grunt to the project and will update package.json file.

package.json file

{
  "name": "grunt-project",
  "version": "1.0.0",
  "description": "This is a sample grunt project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yusuf Shakeel",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

Congratulation! You have successfully installed Grunt in your project. In the next tutorial we will learn to create simple tasks for Grunt. Have fun coding.