I’m sorry, are you from the past?

Roy Trenneman

Feel like it's time to automate a few things?

  • I minify my javascripts manually, so much fun!
  • — No one. Ever.

Grunt.js is a tool that allows you to eliminate the repetitive tasks from your workflow. It's becoming increasingly popular and it's now used by the most innovative companies, like Twitter, jQuery and Automattic.

If you design websites for a living, this book will teach you how to automate the repetitive and zero added-value tasks with Grunt.

You will learn Grunt from the very beginning, step-by-step and with lots of examples.

And yes, you will need to use the command-line a bit. But don't be scared, we'll walk you through this too!

We're working on the book right now, but you should sign-up to get the first chapters for free when they are ready.

If you're a front-end developer or a designer, you have to know why you should use Grunt. Read on!

Are you really happy with your current process?

We've had the chance to collaborate with quite a lot of designers and front-end developers over the past years. Most of them are smart people who care a lot about the quality of their work. They definitely know about the industry's best practices and don't miss a post on Smashing Magazine. They don't need to be lectured by anyone about web standards or why page speed matters.

But still, when we ask them about their process, we get this kind of feedback:

CSSLint? JSHint?
Yeah I checked yesterday, should still be fine.
This project doesn’t have so much code yet anyway.
Minify and concatenate
scripts & CSS?
Yup, I could do this in 2 minutes.
Let’s do it when we’ll go live okay?
Images optimization?
I’m almost sure it’s good, but let me check...
Assets expiration?
Oh well, can you clear your cache? Cmd+shift+R.
Still there? Are you sure? Okay click on Settings...

This would have been totally fine 5 years ago.

But now they could just say:

Yep, all taken care of.
Did you hear about Grunt?

What Grunt.js can do for you

Grunt is a tool that allows you to automate every boring and repetitive task in your development process. You launch your instructions from your computer's command-line (Command on Windows, Terminal on Mac OS).

Allergic to the command-line?
On a daily basis, you will need only 2 commands: "grunt" and "grunt server".

So, yes, you will have to type something. But look at what a single command like this can trigger:

Check your JS with JSHint

/app/scripts/app.js

Grunt lints your JS

Console notifications

JShint output

Check your CSS with CSS Lint

/app/styles/main.scss

Checks your CSS

Console notifications

CSSLint output from Grunt

Take care of assets expiration

/app/index.html

Revisions your assets

/dist/index.html

Cache-busting with Grunt.js

Optimize your images

/app/images

Grunt opimizes your pictures

/dist/images

Reduce your jpg and png sizes

Concatenate your files

/app/scripts

Concatenates your JS and CSS

/dist/scripts

Reduce HTTP requests with Grunt

Minify CSS and Uglify your scripts

/app/scripts/app.js

Minify your javascripts

/dist/scripts/custom.js

Optimize loading times with Grunt

Reload the browser window for you when a file is changed

/app/index.html

Livereload with Grunt.js

Browser live reloading

Preview your changes in your browser

You can also use Grunt to handle Saas / Less compilation, add CSS vendor prefix, perform deployments, send queries to an API, zip and upload files, and it can be extended with hundreds of open-source plugins.

With these tasks out of your way, you can focus full time on what makes you valuable to your clients.

So I just have to install Grunt, right?

Yeah... well... that's where you could get discouraged pretty quickly.

The people behind Grunt are insanely brilliant, but it is still a fairly new tool. And the official getting started guide for Grunt is quite hard to follow if you're not used to command-line tools.

Even with the help of Yeoman, you'd need to "guess" quite a lot of things and search through many different tutorials to get started.

Don't worry! We'll guide you through the steps

Grunt command example

We believe that Grunt is an amazing tool that deserves more attention.

Our goal is to promote it to more users, and provide newcomers with tools and resources to get started faster. In our opinion, Grunt should also be accessible to a wider audience: web designers, front-end developers, project managers or even art directors.

We already helped quite a few people installing and using Grunt, so we have a good idea of the most common issues faced by new users... even when they are using Windows!

We started working on the book only a few weeks ago (September 2013). We're actively looking for more feedback and we'll be happy to send you the first chapters when they are ready.