I’ve been reading about grunt for awhile and to honest I was skeptical about its value to my development workflow. I realize after using Grunt that I was doing a number of things inefficiently in my build process.
So what is Grunt and why would you use it? In short, Grunt is a taskrunner; think of it as bunch of batch files but organized into plugins. It does the boring mundane tasks like minifying javascript files, compiling LESS or SASS, copying working files, concatenating files and it can also incorporate livereload. These are just a few of the things it can do but it should be enough for to have a serious look at it.
I won’t go into installing npm or Grunt itself as there are tons of resources available for that. Lets assume that everything went according to plan and you’re ready to start.
Package.json
Before you can use and run Grunt in a new project, you’ll need the following:
1. A package.json
file. It contains meta data about the dependencies of the project and should be created first.
2. A Gruntfile.js
. This file loads and configures tasks for Grunt.
To create package.json
file, run either npm install
, npm init
or grunt-init
from the command line in the root directory of your project. If you’ve installed npm globally and have it in your path, use npm init
. You’ll be asked a bunch of profiling questions about your project. Just answer them the best you can. Most of the fields can be blank but I did have to have the version value as 0.0.0 or it threw an error.
The first package.json file should look something like this:
{
"name": "testgrunt",
"version": "0.0.0",
"description": "my test",
"main": "index.html",
"scripts": {
"test": "test"
},
"keywords": [
"none"
],
"author": "jeff wrathall",
"license": "BSD-2-Clause"
}
Gruntfile
Next, to get Grunt set up we have to run npm install grunt --save-dev
. This will install the latest version of Grunt locally and add it to the list of dependencies in the package.json
file. Moving forward, whenever you want to install or use any module with npm and Grunt you will need to run this same command. If you want to, for example, install jsHint for use in you Grunt file you would use npm install grunt-contrib-jshint --save-dev
. Check out the Gruntjs repro on Github for more plugins.
Go ahead and manually create the Gruntfile.js
in your project root along side the package.json
file.
The Gruntfile consists of a wrapper function, task configuration, loading Grunt plugins and tasks and custom tasks that you want to add. The Gruntfile is a valid javascript file and should be placed in the root of your project along with the package.json
file. Instead of breaking down each part, have a look at the comment Gruntfile
//wrapper function
module.exports = function(grunt){
"use strict";
// task configuration
grunt.initConfig({
//loading meta data from package.json
pkg: grunt.file.readJSON('package.json'),
//configuration for compass plugin tasks
compass: {
dist: {
options: {
sassDir: 'styles/sass',
fontsDir: 'fonts/',
cssDir: '',
outputStyle: 'compressed'
}
}
},
// configuration for jshint plugin tasks
jshint: {
// You get to make the name
// The paths tell JSHint which files to validate
myFiles: ['dir1/**/*.js', 'dir2/**/*.js']
}
});
//plugins
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-jshint');
//custom tasks
grunt.registerTask('default', ['jshint','compass']);
};
You’ll notice that each plugin has its task properties set in Gruntfile. The Gruntjs repro at Github has lots of useful plugins and they are all well documented.
Once a plugin is loaded using npm install module --save-dev
into the package.json
file, it can then be used in the Gruntfile by calling using grunt.loadNpmTasks('module-name')
.
The last step is to get Grunt to run your tasks when you type grunt
into the command line. Register your task as part of the default command by adding grunt.registerTask('default', ['jshint','compass']);
as the last line in your Gruntfile. Optionally, you could write the register task like this grunt.registerTask('default', 'jshint');
and then you would have to call each task individually like: grunt jshint
Once you are ready to test it out enter grunt
into the command line.
I hope this brief post helps with the basics configuring Grunt. There is much more Grunt can do and I encourage you to check out the official docs.