Hello Grunt

This book shows how to automatise common tasks in front-end development, like running tests or compiling Sass stylesheets. While we could do this with shell scripts, we will use a tool specially tuned for JavaScript development: Grunt

Grunt is a task runner. We could define a task that starts a local web server and just launch it from the console with:

$ grunt server

Okay, running a web server is not very impressive. But what if we could, with that very same line, lint our code, compile Sass stylesheets, Handlebar templates, minify all the JavaScript files, run unit tests and then launching a server and automatically open a browser with your web app on it?

That sounds better, and these kinds of flows is what Grunt is made for.

This book is purely practical, and we will see how to automatise some of these tasks step by step, incrementally. Along the chapters, we will setup a project that you can use as a template later.

We won’t be covering everything you can do with Grunt, but you should be able to figure it out by yourself once you finish all the chapters. The goal of this guide is to give you a solid basis so you can look out how to automatise what you need exactly.

Ah! And Grunt is free and open source. The code is available in a repository on Github. The community is growing and there are hundreds of plugins you can use.

Install Node and Grunt

You might not have yet Node.js installed in your system. Node is a system that can run JavaScript outside a browser, like a regular scripting language.

You can install Node both from source code or binaries. Just go to the downloads page and grab a distribution appropriate for your system. In addition to those downloads, if you are on a Mac you can install Node with Homebrew:

$ brew install node

After installing Node, you need to install NPM, a package manager for Node code (think of it as Node’s RubyGems). You can install NPM from source:

$ curl http://npmjs.org/install.sh | sh

Are you using Windows? In this book we are assuming you have access to a shell. A real shell. Taking into account all the tools that UNIX systems provide to developers, please consider installing a Linux distribution in a virtual machine. If this sounds too much, you can still install Node and Grunt in Windows… But keep in mind that all the commands shown to create directories, print files’ contents, etc. work only in UNIX systems. You should use Windows-equivalent commands when following the examples.

Now that we have both Node and NPM, we can install Grunt. There are two packages that we need to download. One of them, grunt-cli contains Grunt’s command line interface, so you can run grunt in your console. The other one, grunt, is the actual code and you need to install it per project (as we’ll do later).

grunt-cli needs to be installed globally, like this:

$ npm install -g grunt-cli

Start the project

We mentioned a project we would be working on along the chapters in this book. We are starting it now! Open a terminal and create a grunt-tutorial directory wherever you want:

$ mkdir grunt-tutorial
$ cd grunt-tutorial

NPM has a cool way of managing dependencies and project’s metadata. You just need to create a file named package.json in the root of your project and let the magic happen.

The initial contents of this JSON file are as follows:

{
  "name": "grunt-tutorial",
  "version": "0.0.0"
}

Now we will install grunt in this project, via NPM.

$ npm install grunt --save-dev

See that --save-dev flag? This tells NPM to update the package.json file to add the grunt module as a dependency. Take a look at its contents now:

$ cat package.json
{
  "name": "grunt-tutorial",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

This also creates a node_modules directory: all the Node packages that you install will be copied into this directory. The dependencies list is very useful (it works like a Gemfile), specially when we are working with more people in a project.

If you run npm install, NPM will read the dependencies list and will install everything that is listed, with the appropriate version. Let’s do a test by deleting are newly-installed grunt, and re-installing it again:

$ rm -rf node_modules/*
$ npm install
$ tree -L 2
.
├── node_modules
│   └── grunt
└── package.json

Last, we need to create a special file in the root of our project, called Gruntfile.js. This is the file that Grunt will load and will get the tasks code from.

For now, we will leave this file empty:

$ touch Gruntfile.js

If everything has gone well, you should be able to run Grunt and see an error of not having a default task to run:

$ grunt
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings. 

Don’t worry, we’ll fix this lack of tasks in the next chapter.

Recap

In this chapter we have learnt:

• What is Grunt and why we want to use it.
• How to install Node and NPM.
• How to install Grunt.
• How to start a project that uses Grunt from scratch.

The code so far

You can download the full source code for this chapter at the book’s home page.

{
  "name": "grunt-tutorial",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}