Getting Started with Grunt – configuration

getting started with grunt

What exactly is Grunt?
Grunt is JavaScript task runner which helps you automate the tasks that you do while development. There are n number of tasks that you do on a repetitive basis during the development phase such as doing unit testing, joining of various files, minification, sass to css etc. So rather than doing these tasks again and again by yourself, you can configure a Gruntfile and create a task runner which is a one time task and that task runner will handle all the non-development tasks for you.

Grunt provides hundreds of plugins which you can use to automate the tasks. Here are few of the plugins which Grunt provides.

learn grunt

Installing Grunt
You can install Grunt and various Grunt plugins on your system using npm. Next step is installing Grunt’s Command Line Interface(CLI) using the following command:

npm install -g grunt-cli

This will install grunt-cli in the global namespace so that it can be executed from any location on your system. For each project that you work on you will have to install grunt separately for it along with the gruntfile. grunt-cli is responsible for running the version of grunt that you have installed next to the gruntfile.

Creating a new Grunt project
Each grunt project that you create will have two files in it.

1. The first file is the package.json which contains project related information and data related to dependencies installed. package.json can be created using npm init command. It should be created at the root level of your project. package.json file looks like this

{
  "name": "index.html",
  "version": "1.0.0",
  "description": "",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.13.1",
    "jquery": "^2.1.4",
    "socket.io": "^1.3.5"
  }
}

2. Second file is Gruntfile.js which is also created at the project root level along with package.json. Inside the Gruntfile.js file we load various plugins and write the tasks for various automation processes.

In the next post we will see how to start writing tasks inside the Gruntfile.