Creating the Project

Let’s create a project folder called deployment and then navigate into it:

 
$ ​mkdir deployment
 
$ ​cd deployment
 
$ ​npm init

Fill in the basic information or leave it at its default values. Alternatively, create your own package.json file that contains this:

 
{
 
"name": ​"deploying"​,
 
"version": ​"0.0.0"​,
 
"description": ​"A simple project to copy files for deployment."
 
}

Next, we add Grunt as a dependency:

 
$ ​npm install grunt --save-dev

Now we’ll create a basic Gruntfile.js with the following content:

files/simple/deploying/Gruntfile.js
 
module.exports = ​function​(grunt){
 
}

Now let’s create a few simple files and folders in this project. First, create an index.html file with a default HTML5 template:

files/simple/deploying/index.html
 
<!DOCTYPE html>
 
<html​ lang=​"en-US"​​>
 
<head>
 
<meta​ charset=​"utf-8"​​>
 
<title>​Test page​</title>
 
<link​ rel=​"stylesheet"​ href=​"stylesheets/style.css"​​>
 
</head>
 
<body>
 
<h1>​Test page​</h1>
 
</body>
 
</html>

Then create the folders stylesheets and javascripts:

 
$ ​mkdir stylesheets
 
$ ​mkdir javascripts

After that, create a stylesheets/style.css file with the following contents:

files/simple/deploying/stylesheets/style.css
 
h1​{color: #F00;}

We’re not putting much in the files for this exercise; we just want some text in there so we’ll know later on that the files copied correctly. If we left them blank we wouldn’t be sure if the right things got copied.

Finally, create the file javascripts/app.js, which looks like this:

files/simple/deploying/javascripts/app.js
 
var​ ​app​ = {};
 
app​.name = ​'Hello'​;

With the setup out of the way, let’s jump into how we work with these files in Grunt tasks.

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

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