As a self-described “task runner”, Grunt is powerful and pleasantly approachable. Its succinctness makes it a joy to use. This carries over into the Grunt documentation, which is really excellent. Inspired by the Sample Gruntfile tutorial, I’d like to walk through my own
Once you have Grunt installed using the Node Package Manager, you will need a
package.json file, just as for other Node utilities. The quickest way to create a
package.json file is to simply run
npm init which generates the file after a series of questions.
The following libraries will be used:
- grunt-contrib-compass: generates CSS from Sass
- grunt-contrib-concat: combines various files into a single file
- grunt-contrib-cssmin: minifies CSS
- grunt-contrib-watch: performs tasks whenever a file changes
The recommended approach, as stated at the beginning of the documentation for each plugin, is to run
npm install grunt-contrib-xxx --save-dev, which has the dual benefit of installing the plugin and also adding a reference to it in
package.json, the only other file you need is
Gruntfile, in which you define and configure the tasks to run. Configuration options are specified as the argument to
The first line reads in
package.json and turns it into an object. In this case, I’m interested in product name, but it can provide many other useful properties.
Gruntfile tasks share the same basic syntax for specifying options, input and output. Each task’s configuration block is named after the plugin; for example, the configuration block for the
grunt-contrib-uglify is simply
grunt concat:scripts runs just the “scripts” target. If you don’t provide a target, then all targets would be run in order.
The Compass task generates CSS from Sass source. Of course, Compass must be installed first. The following options simply instruct Compass to process Sass files in the directory “sass” and generate the corresponding CSS files in the directory “css”.
1 2 3 4 5 6 7 8
When developing, it would be nice to be able to preview changes made to the Sass source. This is where the watch plugin comes in. In the simplest use case it simply detects that one or more files have been changed and then runs certain tasks. The following options allow me to re-generate CSS each time a Sass file is modified. Start watching by typing
grunt watch at the command prompt.
1 2 3 4 5 6
src/**/*.js means all
.js files in the
src directory and any of its sub-directories. The files would be combined in alphabetical order. An alternative would be to specify an array of individual files. While this lets you control the ordering of files, it becomes unwieldy for a large number of files. Of course, there are many ways to skin the cat. For the output, I’m using the project’s name which comes from
1 2 3 4 5 6 7 8 9 10 11 12 13
The cssmin plugin provides CSS minification. The source should be the output of the concat stage. Note the variable substitution syntax.
1 2 3 4 5 6
1 2 3 4 5 6 7 8 9 10
The jshint configuration block just sets some options for jshint.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Finally register a default task and a useful task. Tasks would be executed in the order specified.
To run a task, simply specify the task’s name as a argument to
grunt on the command line; e.g.,
grunt jshint. Simply typing
grunt runs the default task. Below is the output for running the default task; even for this small set of tasks, running them manually or maintaining a script without Grunt would have been a tedious chore.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Below is the entire
Gruntfile. Happy grunting.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78