Grunt Email Boilerplate
A grunt-ready HTML email template based on HTML Email Boilerplate.
- SCSS stylesheets with Compass
- image optimization with jpegtran and OptiPNG
- inlining CSS styles with grunt-premailer and Premailer
- HTML templating with EJS and more
- Environment specific code blocks in HTML with grunt-preprocess
- test email delivery with grunt-nodemailer and NodeMailer
- Node.js >= 0.10.20 (install wiki)
- Grunt-cli >= 0.1.7 and Grunt >=0.4.2 (
npm install grunt-cli -g)
- Ruby >= 1.9.3 (installers)
- Compass >= 0.12.2 (
gem install compass)
- Premailer >= 1.8.0 (
gem install premailerand, 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:
Run the development task
grunt devand start editing email files in
srcfolder (by default
scss/_main.scss). By default, Grunt will try to open the email preview in your default browser; alternatively, preview URL is
0.2 to 0.3 Changes
Version 0.3 introduces several changes to included plugins, tasks and folders' structure:
- System changes
- Boilerplate now requires Node.js >= 0.10.20, Ruby >= 1.9.3, Premailer >= 1.8.0 and Grunt >=0.4.2
- Files and folder changes
datafolder moved into
- intermediate files (as
_tmp.email.html) are now stored in a temporary folder (
- build folder
distis no more suffixed with current date
- Tasks and configuration changes
- Updated all tasks to latest versions
devDomainpaths in favor of dedicated
- Boilerplate now allows multiple email files (
paths.email === '*.html')
grunt-devcodein favor of
grunt-contrib-compasswatch option instead of a
sendtask 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
email.html: HTML boilerplate
scss/: 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 style
style.scss: glue stylesheet, don't edit it directly
images: source images of your email
inc: optional partials files (requires a
rendertask to be set)
data: optional JSON files with variables (requires a
rendertask to be set)
The boilerplate comes with some predefined tasks to cover average email development needs.
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.
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)
dev by sending the compiled email to any configured recipient.
Gruntfile.js source for more options and customizations.
Tips and Tricks
- 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.
- Packages and docs updates.
- Updated plugins and workflow. See section 0.2 to 0.3 Changes for details.
- updated grunt-premailer to v0.2.0.
- bugfixes and updates, send task moved to external grunt plugin, premailer task moved to external grunt plugin.
send task renamed to
test renamed to
send as in generator-htmlemail.
- better test handling. Updated dependencies.
- render task moved to external grunt plugin.
ejs templates are now statically rendered in development stage by the
watch task. Added
devcode tasks. Fixed some issues with the
- compatibility with grunt 0.4+ and contrib plugins
- removed a couple of unneeded deps. Optimized
- Added support for ejs templating
- Debugging and polishing
- Initial release
Copyright (c) 2012-2013 Marco Solazzi Licensed under the MIT license.