How to use grunt? – A build tool for web development

During the web development process, there are bunch of tasks that you’ll be doing regularly. Minifying files, concatenating files, compiling sass or less to CSS, unit testing and linting JS files are some of them. Grunt helps to make these regular tasks automated. It saves lots of time and energy, it has bunch of built-in tasks that make front end development easy.

Getting Started with grunt

Grunt is built on node.js; It is available as a package in the NPM (Node Package Manager). To use grunt, you need to have node.js installed in your machine. But you can use grunt with any app like node app, any MVC app, wordpress app or just plain HTML/CSS/JS app.

Start Grunt installation

Before starting the grunt, first install node.js in your machine. Grunt is a package of npm, and npm comes with node.js; separate installation is not required. However npm gets updated frequently. Make sure, you have updated npm installed.

1

$npm update-gnpm

After the node.js installation, you need to install grunt package in your machine. You can install it globally with the flag '-g' in the command window. It can be used, in any project in your machine, when you install it globally. Open node.js command window and run the command. To know difference between local and global installation refer my last post

1

$npm install-ggrunt

To install any package globally, you need to run node command window as administrator.

Installing required grunt packages

All the required packages need to be there in the package.json file. If package.json is not available then run the command 'npm init' in the command window. It will add the package.json file. Now you can either add all your required packages in the package.json (as shown below) , and run the command 'npm install'; it will install all the given packages…

1

2

3

4

5

"dependencies":{

"grunt-contrib-uglify":"latest",

"grunt-contrib-less":"latest",

"grunt-contrib-jshint":"latest"

},

…or you can install all the required packages using the flag '--save'

1

$npm install--save grunt-contrib-jshint

Now, you can start writing grunt.js file

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// Gruntfile.js

// wrapper function (required by grunt and its plugins)

module.exports=function(grunt){

grunt.initConfig({

// all of our configuration will go here

sass:{

files:{

‘assets/main.css’:’assets/main.scss’

// 'destination': 'source'

}

}

});

// Load Grunt Plugins

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-compass');

grunt.loadNpmTasks('grunt-contrib-sass');

grunt.loadNpmTasks('grunt-contrib-watch');

};

In this grunt file, we have set the configuration for converting sass to css. You can add as many tasks as you want here. But make sure the grunt plugins used are loaded, using the method 'grunt.loadNpmTasks()'

Now, to run this task run the command 'grunt sass' in the command window. Similarly you can run other defined tasks. Like, 'grunt cssmin', 'grunt uglify' and so on…

You can run multiple tasks with one command

By defining default task, you can run multiple tasks with one command.

1

2

// default task

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

Now, you need not to run different tasks separately. Just run the command 'grunt' it will run all the default tasks with one command.

You can create different tasks for different environments

We may require different tasks for dev and production environment. For e.g. some tasks to be run on the dev environment but not in the production environment and vice versa.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

grunt.initConfig({

sass:{

dev:{

files:{

'assets/main.css':'assets/main.scss'

}

}

prod:{

files:{

'assets/main.css':'assets/*.scss'

}

}

}

});

Now, you can run the different tasks with the different commands.

1

2

$grunt sass:dev

$grunt sass:prod

You can set the different environment in your default tasks list also.

1

2

3

4

5

6

// default task

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

// default task with dev configuration only

grunt.registerTask('dev',['uglify:dev','cssmin:dev','sass:dev']);

// default task with prod configuration only

grunt.registerTask('prod',['uglify:prod','cssmin:prod','sass:prod']);

Now, to run these default tasks for different environment, run the command.

1

2

$grunt dev

$grunt prod

Running a task when a file is changed or saved

You can run a watch task, which will watch all the specified files, as and when a file changes it will run specified tasks.

1

2

3

4

5

6

7

8

9

watch:{

scripts:{

files:['javascripts/modules/*.js','sass/*.scss'],

tasks:['concat','sass','cssmin'],

options:{

spawn:false,

},

},

}

Now, running the command 'grunt watch' will watch all the JS files in modules folder and scss files in sass folder. As and when any files changes in these folders tasks – concat, sass and cssmin will run itself.