Installing Grunt and Configuring a Gruntfile

Before we can do anything with Grunt, we have to install the Grunt command-line tool. Grunt is written in Node.js, and to install it we use npm, the tool Node uses to download and manage dependencies. Open a new Terminal and type the following command:

 
$ ​npm install -g grunt-cli

This installs the Grunt command-line utility globally. On Linux or OS X, you may need to run this command using sudo if you get a “Permission Denied” error.

Grunt is broken into separate packages, each serving a specific purpose. The grunt-cli package gives us a command-line interface. But to use this interface, we have to install the grunt package as well; installing grunt-cli doesn’t automatically install grunt for us.

Instead, we install Grunt into our project as a dependency. The grunt-cli tool we installed globally on our system will then work with the version of grunt within our project. Let’s create a simple project folder and set everything up.

Create a new folder called kicking_tires and navigate into that folder in your Terminal:

 
$ ​mkdir kicking_tires
 
$ ​cd kicking_tires

From here, you could install Grunt with npm install grunt, but there’s a better way. Node.js applications use a file called package.json to store the metadata about a project as well as track a project’s dependencies. If we create this file, we can add Grunt as a dependency to our project, making it easier to set things up in the future.

Type the following command to create a new package.json file.

 
$ ​npm init

You’ll be asked a series of questions about your project. For this project you can leave everything at the default settings. Your package.json file will end up looking like this when the wizard finishes:

 
{
 
"name": ​"kicking_tires"​,
 
"version": ​"0.0.0"​,
 
"description": ​""​,
 
"main": ​"index.js"​,
 
"scripts": {
 
"test": ​"echo "Error: no test specified" && exit 1"
 
},
 
"author": ​""​,
 
"license": ​"BSD-2-Clause"
 
}

Now that we have this file in place, we can add Grunt as a development dependency like this:

 
$ ​npm install grunt --save-dev

Grunt will be installed into the node_modules/ subfolder of the current folder, and it’ll be added to the package.json file as a development dependency. If you look at your package.json file you’ll see this at the bottom now:

 
"devDependencies"​: {
 
"grunt": ​"~0.4.4"
 
}

The devDependencies section lists dependencies that are used only to build an application. Grunt isn’t something an application needs to run; we use Grunt only as a tool for developing an application. However, a library that lets us connect to a MySQL database would be a true dependency, not a development dependency.

The --save-dev command also saves the version number into the package.json file, and it uses the tilde in front of the version number to signify that any version 0.4.4 or higher is OK for us to use. Version 0.4.7, for example, would be valid, but 0.5.0 would not. This helps us stay current within minor version numbers, but prevents us from accidentally installing a version that’s too new and incompatible. Of course, we can change this version number by hand if we like.

The node_modules folder contains all of the libraries our project depends on. This means you have a copy of the Grunt library itself in the node_modules folder.

Adding things as development dependencies allows new people who want to work on our project to easily download all of the dependencies we specify by issuing the npm install command in the folder that contains the package.json file. In fact, let’s try this now. Remove the node_modules folder and then run npm install. You’ll see that npm fetches Grunt again, creating a new node_modules folder.

With Grunt installed, we can test things out by running it from the command line:

 
$ ​grunt

This fires off the grunt-cli library we installed globally, which then uses the grunt library we installed in our project’s node_modules folder. This lets us easily use different versions of Grunt on different projects.

But when we look at our output, we see this message:

 
A valid Gruntfile could not be found. Please see the getting started guide for
 
more information on how to configure grunt: http://gruntjs.com/getting-started
 
Fatal error: Unable to find Gruntfile.

Grunt is telling us that we need something called a Gruntfile in our project. A Gruntfile is a JavaScript file that specifies and configures the tasks you want to be able to run for your project. It’s like a Makefile. Grunt is specifically looking for a file called Gruntfile.js in the current working directory and it can’t find one, so it doesn’t know what we want it to do. Let’s create a Gruntfile.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.116.20