Gulp pipeline example dedicated to build HTML emails.
This is a mere prototype. Use it at your own risks. This was intended to provide a faster to build a complete set of emails with custom parts and styling.
$ git clone https://github.com/Daylon/hbs-mjml-seed.git $ cd hbs-mjml-seed $ gulp
This pipeline use
MJML for custom email markup,
Handlebars for templating and
SASS for styling. Please refer to their own documentation and/or repo for help:
Let's keep MJML and CSS separated, shall we?
The same way that making HTML for email can be tedious, having to tweak CSS rules attributes by hand can be cumbersome as well. For these reasons, I didn't want to regress from my previous setup but MJML is pretty much the only solution (at the time of this writing) to provide a markup capable of removing noise from your HMTL templates.
To achieve this, this pipeline leverages a fork from the fantastic lib
inline-css by (and, in the process,
gulp-inline-css; same author). Here's the pull request, if you wish to weigh in. While this lib neatly converts class related css rules into style attributes, I tweak it up to support any custom rule, including exotic ones (e.g.
Interesting side-effect: VML style attributes (for, say, call-to-actions) can now be set, so you won't have to worry about having discrepancies between templates and style rules when modifying your call-to-actions.
Can I change these definitions?
Yes, you can. Open up
/gulptasks/core/core-mjml.js and start adding properties. By default, any added rule will become an attribute.
Why using Handlebars
Handlebars allows us to use a neat built-in feature that make it skip partials declaration on first pass.
This way, a single handlebars template can produce multiple files, based on the first layer of variables, ready to be fed with real production data.
Use case: theming
First round —Gulp task
Given a single
index.tpl, we loop through an array of JSON data defined in
Each index sets up what is static: pre-header, default unsuscribe link, invoke the correct partial, etc.
Second pass —on server
The produced new templates (one per theme) can now be used for a specific scenario or userbase sampling.
MJML being a young project, some elements can still be buggy or lack optimizations; you may have to mix up both MJML and raw html.