HTML and CSS Reference
In-Depth Information
one thing to note is the -g you used in your command for installing grunt. this flag indicates that it will be
installed globally.
Tip
In the next section, you will install your packages locally to the project. Grunt is the only one you want to be able
to access in any project on which you're working.
Creating a Grunt File
At this point, you are ready to create your build script. Grunt requires a case-specific file named GruntFile.js ×in the
root of your project. Let's create that in your code editor of choice, and I will go over how each part of the script works
plus how you can add onto it.
Once you have created your GruntFile.js , open it, and add to it the following code:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
}
This is the basic template for your script. There is not much you can do, so let's set up a basic server and have
it display an index page with “Hello World” on it. Create an index.html file in your project. Next, you will want to
install a simple Node server module, called connect . Grunt has its own standard library of modules, called tasks . You
can see a full listing of these at http://gruntjs.com/plugins . You can install them throughnpm. Switch back to the
command line, and enter this:
> npm install grunt-contrib-connect --save-dev
There are a few things to point out here. Recall how you used npm to install Grunt on the command line. Here,
though, you will notice that you are not using the global flag -g and instead add --save-dev . This is a special flag that
tells npm not only that you are going to install this module locally, but also that you want to save a reference to it in
your project.json file. This is very important, as it will allow you to manage module dependency as your project
grows. Let's open the project.json file and take a look at what was added there. You should now see the following
code toward the bottom of the file:
"devDependencies": {
"grunt-contrib-connect": "~0.3.0",
}
Keep in mind that you may be using a different version from what I show here, as the plug-ins are constantly
being updated by their authors. Pretty cool, right? Anything you install with --save-dev will automatically be added
to your dev dependencies in your project.json file. Now, when you distribute your project, or if ever have to set it
up again from scratch, npm will simply read these dependencies and install them for you. We'll talk about how that
works later in this section. For now, you will need to set up the connect module in your GruntFile. Switch back to the
GruntFile.js , and add the following code just above the grunt.initConfig line:
grunt.loadNpmTasks('grunt-contrib-connect');
 
 
Search WWH ::




Custom Search