Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Getting Started with Grunt: The JavaScript Task Runner
  • Table Of Contents Toc
  • Feedback & Rating feedback
Getting Started with Grunt: The JavaScript Task Runner

Getting Started with Grunt: The JavaScript Task Runner

By : Jaime Pillora, Bocoup LLC
4.4 (10)
close
close
Getting Started with Grunt: The JavaScript Task Runner

Getting Started with Grunt: The JavaScript Task Runner

4.4 (10)
By: Jaime Pillora, Bocoup LLC

Overview of this book

Table of Contents (12 chapters)
close
close

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!

bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete