Book Image

Getting Started with Grunt: The JavaScript Task Runner

By : Jaime Pillora, Bocoup LLC
Book Image

Getting Started with Grunt: The JavaScript Task Runner

By: Jaime Pillora, Bocoup LLC

Overview of this book

Table of Contents (12 chapters)

What is Grunt?


When Ben Alman released Grunt (http://gswg.io#grunt) in March 2012, he described it as a task-based command line build tool for JavaScript projects. Now, with the release of Grunt version 0.4.x, the project caption is The JavaScript Task Runner. Build tools or task runners are most commonly used for automating repetitive tasks, though we will see that the benefits of using Grunt far exceed simple automation.

The terms build tool and task runner essentially mean the same thing and throughout this book, I will always use build tool, though both can be used interchangeably. Build tools are programs with the sole purpose of executing code to convert some source code into a final product, whether it be a complete web application, a small JavaScript library or even a Node.js command-line tool. This build process can be composed of any number of steps, including: style and coding practice enforcement, compiling, file watching and automatic task execution, and unit testing and end-to-end testing, just to name a few.

Grunt has received huge success in the open-source community, especially with the rise of JavaScript following the world's increasing demand for web applications. At the time of writing this book (December 2013), Grunt is downloaded approximately 300,000 times per month (http://gswg.io#grunt-stats) and the open-source community has published approximately 1,400 Grunt plugins in npm (the Node.js package manager http://gswg.io#npm) and these numbers continue to rise.

Node.js (http://gswg.io#node) is a platform for writing JavaScript command-line tools, which run on all major operating systems. Grunt is one such command-line tool. Once installed, we can execute grunt on the command line. This tells Grunt to look for a Gruntfile.js file. This choice of name refers to the build tool Make, and its Makefile. This file is the entry point to our build, which can define tasks inline, load tasks from external files, load tasks from external modules, and configure these tasks and much more.

Let's briefly review a simple example of a Gruntfile.js file so we can get a glimpse of what is to come:

//Code example 01-minify
module.exports = function(grunt) {

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Project configuration.
  grunt.initConfig({
    uglify: {
      target1: {
        src: 'foo.js',
        dest: 'foo.min.js'
      }
    }
  });

  // Define the default task
  grunt.registerTask('default', ['uglify']);
};

In this short example, we are using the uglify plugin to create a minified (or compressed) version of our main project file—foo.js in this case. First, we load the plugin with loadNpmTasks. Next, we'll configure it by passing a configuration object to initConfig. Finally, we'll define a default task, which in this example, is simply an alias to the uglify task.

Now, we can run the default task with grunt and we should see the following output:

$ grunt
Running "uglify:target1" (uglify) task
File "foo.min.js" created.
Done, without errors.

We've just created and successfully run our first Grunt build!