Adding Grunt to Your Web-application Project
You’ll find the slides bellow. The first part mostly present Grunt and why I think it’s a game-changer for front-end developers. As I already wrote about this in my previous post about Grunt, I invite you to read it if it sounds interesting to you. In the second part, I focused on showing a few examples use cases and concrete examples. That’s what I’m going to detail in this post.
Automating your web application
Bringing some automation to your web-application is probably the first thing you’ll try with Grunt. After all, that’s its first purpose, why it was designed for.
Because nothing worth an example, I reused an old project to illustrate this case. It’s a simple Gallery application build over Backbone.JS, jQuery, QUnit and Twitter Bootstrap. The full project is available on Github. The code I used as an example lives in the master branch. The original code, as it was before adding Grunt, lives in the before-grunt branch.
Adding Grunt to an existing project
Assuming Grunt is already installed on your system, adding Grunt to your project is as simple as typing the following in your terminal:
After answering a few question, this will produce a single
grunt.js file in your project’s folder.
The basic structure of a gruntfile is looks like this:
1 2 3 4 5 6 7 8 9 10 11 12
We are working with a web-application, so most of the tasks we need are already included in grunt. What do we basically need ?
- run qunit unit tests
In addition, it would be interesting to:
- run qunit tests again on the minified
jsfiles to check if anything is broken in the process
- copy assets (
css, pictures, etc.) to a build folder in order to have a standalone built version of the application
- create an alternative version of the
htmlfiles containing minified
jsfiles rather than development files
Setting up your tasks
Lint, QUnit, concatenation and minification tasks are already built in Grunt. It won’t be too difficult to define these for our project.
If you need another task, start by searching if an existing
grunt-plugin have already been created by the community.
You can search for an existing plugin on grunt homepage or directly with npm:
Otherwise, you can define your own task using the Grunt API, but unless you need something very specific, I doubt you had to go there. Seriously, there are already 190 existing plugins at the time I write these lines.
Once you’ve found and installed the plugin you need, you still have to made it available in your
gruntfile by using the
In our case, we’ll need two external tasks:
1 2 3 4
From there, we just need to configure our tasks.
I’m not going to detail every single line in the resulting
dist folder, and run the tests on both
The syntax is quite self-explaining and you can always refer to the official documentation is needed.
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
Each task can be run independently by typing
grunt taskName in a terminal.
Additionally, you can run a specific target on every multi-task by typing
registerTask API allows us to define aliases to run a few tasks with a single command.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
So what’s next?
I hope you already see the kind of benefits you can get by adding Grunt to your web-application projects.
I also encourage you to take a look at the plugin system, which will allow you to create your own tasks.
The well made
gruntplugin init task (
grunt init:gruntplugin) will bootstrap everything you need to start your own task and publish it in minutes.
If you find yourself stucked at some point, the Grunt API documentation is a very good reference.
You can also check the source code of one of the official plugins on github.
As I wrote at the beginning of this post, using Grunt to automate some tasks in your web-application projects is probably the first thing you’re going to try. But I’m convinced you can use it in many other ways. If you need some more examples, I invite you to look at my own experiments with Grunt: