This is a workflow for building HTML emails using Gulp. It comes with a default MailChimp-supported template.
What it does -
inline.css
file and embeds the embedded.css
fileThis workflow requires the following dependencies -
npm install gulp
)git clone https://github.com/ireade/gulp-email-workflow.git
cd gulp-email-workflow
npm install
npm start
The compiled and inlined output email will be in the build/
directory. Can be previewed in browser at http://localhost:8000
Nunjucks is used for compiling template files to HTML.
Templates are stored in src/templates/
and partials in src/templates/partials
. To create a template, create a file in the templates directory with the .nunjucks
file extension.
To include a partial in your template, use the following syntax -
{% include "partials/PARTIAL_FILE_NAME.nunjucks" %}
To define a block of dynamic content to be replaced by the email file, use the following syntax -
{% block CUSTOM_BLOCK_NAME %}{% endblock %}
To create an email based off a template file, create a new file in the src/emails/
directory (also with the .nunjucks
file extension).
Specify which template to use using the following syntax -
{% extends "TEMPLATE_NAME.nunjucks" %}
To define the contents of a dynamic content block, use the following syntax -
{% block CUSTOM_BLOCK_NAME %}
Content goes here
{% endblock %}
Global data is stored in the src/data
directory as JSON files. Include new data files in the config section at the top of the gulpfile.js
-
var globalData = {
DATA_NAME_1: require('./src/data/FILE_NAME_1.json'),
DATA_NAME_2: require('./src/data/FILE_NAME_2.json')
};
For example -
var globalData = {
mailchimp: require('./src/data/mailchimp.json')
};
SASS files are stored in the src/sass/
directory. There are two main SASS files -
inline.scss
for styles you w Liant to be inlined to their elementsembedded.scss
for styles that shouldn't be inlined. These will be inlcluded within a <style>
element in the <head>
You can create subdirectories within the SASS folder to hold any partials. Make sure to precede the name of a partial with an underscore, e.g. _reset.scss
.
You can also generate a zip file of the build
directory for export. You can do this by running -
npm run zip
Alternatively, you can add it to the default and watch gulp tasks to have it generated automatically.