Original: http://www.pure360.com/blog/blog-entries/Grunt-install by Alfonso de la Osa
These instructions are specific to Windows.
- Download and install Node.js 0.10.x from http://nodejs.org/
- Download and install Python 2.7.x from http://www.python.org/download/
- Download and install Microsoft Visual Studio C++ 2012 Express from: http://go.microsoft.com/?linkid=9816758
If all that seems a bit much then you can see why developers chose Linux and Mac over Windows for web development!
First create your project directory:
$ mkdir email-workshop
$ cd email-workshop
Now create these three directories:
$ mkdir emails
$ mkdir emails\common
$ mkdir build
The emails directory is where we are going to store all the email HTML and CSS files. The build directory is where Grunt will output the final HTML.
We will be using npm to help us install the other tools that we need to build our emails. The first thing to do is tell npm that we want to create a new project:
$ npm init
Now follow the instructions and enter your project details when asked. The values in brackets are the defaults and you can simply accept each default by pressing enter. These values can be changed later in your package.json file so don’t worry too much if you’re not sure what to enter.
Now we use npm to install all of the tools. The first 2 tools only need to be installed once per machine so you can skip this if you’ve already been through this guide or installed them before.
$ npm install -g grunt-cli
$ npm install -g serve
The next set of tools are installed on a per-project basis so make sure you are still in your project directory (email-workshop):
$ npm install --save-dev grunt
$ npm install --save-dev grunt-contrib-watch
$ npm install --save-dev juice
$ npm install --save-dev grunt-juice-email
Open your favourite text editor and create a file named Gruntfile.js in the root of your project with this content:
module.exports = function(grunt) {
// here we tell grunt to load the tasks so we
// can reffer to them
grunt.loadNpmTasks('grunt-juice-email');
grunt.loadNpmTasks('grunt-contrib-watch');
// time to initialize grunt describing what
// we want to accomplish with the tasks
grunt.initConfig({
// juice task is our css inliner
juice: {
// in grunt, a dynamic mapping differs
// from normal mapping in that you
// can define a "src" path and everything
// in ther can be reproduced in a "dest" path
dynamic_mappings: {
files: [{
expand: true,
cwd: 'emails/',
src: ['**/*.html'],
// we are taking everything from
dest: 'build/',
ext: '.html'
}]
}
},
// watch will be used to watch two different
// paths in our project
watch: {
// every change you do to the source code of
// the emails will be passed through the inliner
build: {
files: ['emails/**/*'],
tasks: ['juice']
},
// as soon as the built files arrive to the
// build directory, livereload will reload
// the page in your browser
reload: {
files: ['build/**/*'],
options: {
livereload: true
}
}
}
});
};We will be using LiveReload to automatically update our web browser when we make a change to the HTML or CSS files. You can do this either with the LiveReload Chrome extension or the LiveReload Firefox extension. If you require more information this can be found on their homepage livereload.com. After you load the email in the browser for the first time you will need to enable the extension.
Run the webserver and tell Grunt to start watching for changes to your HTMl and CSS files:
$ start /b serve build
$ start /b grunt watch
If you want to stop or restart this process you can simply close the terminal window.
Create a directory for your email. We will call ours ‘test’.
$ mkdir emails\test
Create a HTML file for the email in this newly created directory. Ours will be called test.html
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="IE=7, IE=9" http-equiv="X-UA-Compatible">
<link rel="stylesheet" type="text/css" href="emails/common/bootstrap.css">
<link rel="stylesheet" type="text/css" href="emails/test/test.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="header">
<h1 class="title"> Very interesting header </h1>
<span class="subtitle"> amazing subtitle </span>
</div>
<div class="description"> <p>Your text!</p> </div>
</div>
</div>
</body>
</html>Create a CSS file for the email in the same directory. Ours will be called test.css. This file will provide styles specifically aimed at the content of this email.
.header {padding-bottom:15px;}
.header span {font-size:22px;}
.wrapper {width:540px; margin:0 auto 80px auto; text-align:left;}
.container {position:relative; border-width:0 !important; }
h1.title {font-family:Georgia, Times New Roman, Times, serif; color:#111111;}
.subtitle {font-family:Georgia, Times New Roman, Times, serif; color:#111111;}
.description {font-family:Georgia, Times New Roman, Times, serif; color:#111111;}Create another CSS file for the email but this time in emails/common directory. This one will be called bootstrap.css. This CSS file will be a base which can be shared between many emails. It will contain styles that will be used on most/all of our emails so it makes sense to keep them in one place so it’s easily reusable.
body {font:16px/30px Georgia, 'Times New Roman', serif; min-width:400px; }
h1 {font-weight:normal; font-size:45px; line-height:60px;}
p {padding:0 0 10px 0;}
a {color:#336699;}Now go to your browser and visit http://localhost:3000/test/test.html, you should see the built version of your email with all the inline styles applied.
Now ensure that you have your LiveReload extension enabled by clicking on the icon. The white spot will turn black. Now every change you make will be automatically updated in the browser.
The resulting HTML should look like:
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=7, IE=9" http-equiv="X-UA-Compatible" />
</head>
<body style="font: 16px/30px Georgia, Times New Roman, serif; min-width: 400px; margin: 0; padding: 75px 0 0 0; text-align: center; -webkit-text-size-adjust: none; background-color: #DDDDDD;">
<div class="wrapper" style="width: 540px; margin: 0 auto 80px auto; text-align: left;">
...
...
</div>
</body>
</html>When you are finished editing you can find your final HTML file in the build folder or you can simply copy the source from the browser.
Job done!