Grunt plugin to convert Jade/HTML templates to email friendly templates.
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install git+https://github.com/Aplopio/email-friendly-templates.git --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-email-friendly-templates');This plugin uses LESS compiler v1.3.3 (we'll update this soon)
Jade compiler
Premailer
In your project's Gruntfile, add a section named email_friendly_templates to the data object passed into grunt.initConfig().
grunt.initConfig({
email_friendly_templates: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});In this example, the foo.jade & foo.less is compiled to email friendly HTML
template foo.html. Internally the specified LESS file is compiled to CSS file before compiling the template.
// foo.jade
html
head
link(rel="stylesheet", href="./foo.css")
body
h1 Some heading
a(href="#") some link
.container
.nested-element
span Some span// foo.less
h1{
color: red;
}
.container {
background: red;
.nested-element {
border: 1px solid white;
}
}<!-- compiled foo.html -->
<html>
<head>
</head>
<body>
<h1 style="color:red">Some heading</h1>
<a href="#">some link</a>
<div style="background:red">
<div style="border:1px solid white"><span>Some span</span></div>
</div>
</body>
</html>grunt.initConfig({
email_friendly_templates: {
options: {},
files: [{
// Must be either a Jade file or HTML file
src: 'foo.jade',
// Output file path for the compiled HTML, if not specified file is
// compiled in the same folder
dest: 'foo.html',
// If a LESS file path is specified then it is compiled to CSS first
// before compiling the template. Do not specify this option if the styles
// are defined in head tag
less: 'foo.less',
// If a compiled file already exists then that is overwritten. Default value
// is false
overwrite: true
}]
},
});In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
(Nothing yet)