During this talk, my purpose was to quickly present the tool and show some example use cases.
I must confess I wasn’t as prepared as I would have been, so my talk may have been confused or unclear from time to time.
If you attended the event, I hope this post will give you more details.
If not, it doesn’t matter, I’m still happy to share my thoughts about this amazing tool.
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:
> cd /path/to/your/project/
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:
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:
# Search for a grunt plugin to do some magic:
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:
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.
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.
# run lint task
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:
- static-templater: A grunt-based command line tool to render HMTL and PDF from JSON and HTML templates
- grunt-wkhtmltopdf: A simple Grunt multitask that uses wkhtmltopdf to convert HTML files to PDF.