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.