A grunt-ready HTML email template based on HTML Email Boilerplate.
:exclamation: :exclamation:MAINTAINERS WANTED: I'm no longer maintaining this project. Feel free to drop me a line if you're interested in keeping up the development :exclamation: :exclamation:
npm install grunt-cli -g
)gem install compass
)gem install premailer
and, most of the time, gem install hpricot
)To install the boilerplate
install all dependencies
clone this git repo
git clone git://github.com/dwightjack/grunt-email-boilerplate.git
install node dependencies:
cd grunt-email-boilerplate
npm install
Run the development task grunt dev
and start editing email files in src
folder (by default email.html
and scss/_main.scss
). By default, Grunt will try to open the email preview in your default browser; alternatively, preview URL is http://localhost:8000/
.
Version 0.3 introduces several changes to included plugins, tasks and folders' structure:
data
folder moved into src
_tmp.email.html
) are now stored in a temporary folder (tmp
by default)dist
is no more suffixed with current date distDomain
and devDomain
paths in favor of dedicated hosts
configuration objectpaths.images
configurationpaths.email === '*.html'
)grunt-devcode
in favor of grunt-preprocess
grunt-contrib-compass
watch option instead of a watch
sub-task.livereload
featuresend
task only allows testing on development environment. Transitory solution while looking for better integration with production environments.This boilerplate comes with a customized version of the HTML Email Boilerplate.
Sources are located in the src
folder:
email.html
: HTML boilerplatescss/
: SCSS folder
_variables.scss
: boilerplate style variables_mixins.scss
: mixins and premailer attributes helpers _base.scss
: common styles_media-queries.scss
: optional media queries for responsive emails_main.scss
: your email stylestyle.scss
: glue stylesheet, don't edit it directlyimages
: source images of your emailinc
: optional partials files (requires a render
task to be set)data
: optional JSON files with variables (requires a render
task to be set)The boilerplate comes with some predefined tasks to cover average email development needs.
dev
Tasks
This tasks runs a watch trigger for changes to sources inside the src
folder and starts a static HTTP server at http://localhost:8000
pointing to the tmp
folder where processed resources are store.
NOTE: This tasks doesn't apply any style inlining.
dist
Tasks
This tasks creates a build from your sources. It creates a folder named dist
next to src
, then compiles your SCSSes and inlines the resulting stylesheet in the HTML source through Premailer. By default, Premailer outputs a text version too.
Images are optimized with jpegtran and OptiPNG.
send
Tasks (was test
before v0.2.3)
Extends dev
by sending the compiled email to any configured recipient.
See Gruntfile.js
source for more options and customizations.
1) Connecting from a machine other than localhost
By default tasks refer to http://localhost:8000
as the test URL, anyway you may connect to the test server by pointing to its IP (e.g.: http://192.168.0.10:8000
) or to any other registered alias.
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.
v0.3.1
v0.3.0
v0.2.4
v0.2.3
send
task renamed to nodemailer
, test
renamed to send
as in generator-htmlemail.v0.2.2
v0.2.1
v0.2
ejs
templates are now statically rendered in development stage by the watch
task. Added open
and devcode
tasks. Fixed some issues with the imagemin
task.v0.1.4
v0.1.3
server
and render
tasksv0.1.2
v0.1.1
v0.1.0
Copyright (c) 2012-2013 Marco Solazzi Licensed under the MIT license.