Repository: ireade/gulp-email-workflow Branch: master Commit: fdfa65664d27 Files: 16 Total size: 28.1 KB Directory structure: gitextract_sbox6c9v/ ├── .gitignore ├── README.md ├── build/ │ ├── css/ │ │ ├── embedded.css │ │ └── inline.css │ └── index.html ├── gulpfile.js ├── license.txt ├── package.json └── src/ ├── data/ │ └── mailchimp.json ├── emails/ │ └── index.nunjucks ├── sass/ │ ├── _reset.scss │ ├── embedded.scss │ └── inline.scss └── templates/ ├── mailchimp.nunjucks └── partials/ ├── footer.nunjucks └── header.nunjucks ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ node_modules build.zip ================================================ FILE: README.md ================================================ # A Gulp Workflow for Building HTML Emails ![Sample Email Template ](screenshot.png) This is a workflow for building HTML emails using Gulp. It comes with a default MailChimp-supported template. What it does - 1. Builds HTML email from templates and partials 2. Compiles SCSS to CSS 3. Inlines the `inline.css` file and embeds the `embedded.css` file 4. Generates a preview of emails 5. Creates a zip of the build directory for upload (optional) ## Getting Started #### 1. Install dependencies This workflow requires the following dependencies - - Node.js with npm ([Install](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)) - Gulp.js (Install with `npm install gulp`) #### 2. Clone this repository ``` git clone https://github.com/ireade/gulp-email-workflow.git cd gulp-email-workflow ``` Or [download as a ZIP](https://github.com/ireade/gulp-email-workflow/archive/master.zip). #### 3. Install packages ``` npm install ``` #### 4. Start build ``` npm start ``` The compiled and inlined output email will be in the `build/` directory. Can be previewed in browser at `http://localhost:8000` ## How to use #### Creating templates [Nunjucks](https://mozilla.github.io/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 %} ``` #### Creating emails from templates 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 %} ``` #### Working with global data 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` - ```javascript var globalData = { DATA_NAME_1: require('./src/data/FILE_NAME_1.json'), DATA_NAME_2: require('./src/data/FILE_NAME_2.json') }; ``` For example - ```javascript var globalData = { mailchimp: require('./src/data/mailchimp.json') }; ``` #### CSS 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 elements - `embedded.scss` for styles that shouldn't be inlined. These will be inlcluded within a `
A gulp workflow for building HTML emails View this email in your browser

Gulp Email Workflow

Gulp Email Workflow is a simple workflow for building HTML emails using Gulp.js. Lorem Khaled Ipsum is a major key to success. Find peace, life is like a water fall, you’ve gotta flow. They don’t want us to win. Wraith talk. Cloth talk.

Sample Content

A code block

.hg { 
  display: grid; 
  grid-template-areas: "header header header" 
		       "navigation main ads" 
		       "footer footer footer";
  grid-template-columns: 150px 1fr 150px; 
  grid-template-rows: 100px 1fr 30px; 
  min-height: 100vh; 
}

An unordered list

  • List item one
  • List item two
  • List item three

An ordered list

  1. List item one
  2. List item two
  3. List item three

A block quote

The first of the month is coming, we have to get money, we have no choice.
Thank you for reading!
================================================ FILE: gulpfile.js ================================================ var gulp = require('gulp'); var gutil = require('gulp-util'); /* ************* Config ************* */ var globalData = { mailchimp: require('./src/data/mailchimp.json') }; /* ************* CSS ************* */ var sass = require('gulp-sass'); var postcss = require('gulp-postcss'); var scss = require('postcss-scss'); var autoprefixer = require('autoprefixer'); var postcssProcessors = [ autoprefixer( { browsers: ['last 2 versions', 'ie > 10'] } ) ] gulp.task('sassInline', function(callback) { return gulp.src('src/sass/inline.scss') .pipe( postcss(postcssProcessors, {syntax: scss}) ) .pipe( sass({ outputStyle: 'expanded' }) .on('error', gutil.log) ) .pipe(gulp.dest('build/css/')); }); gulp.task('sassEmbedded', function(callback) { return gulp.src('src/sass/embedded.scss') .pipe( postcss(postcssProcessors, {syntax: scss}) ) .pipe( sass({ outputStyle: 'compressed' }) .on('error', gutil.log) ) .pipe(gulp.dest('build/css/')); }); var inlineCss = require('gulp-inline-css'); gulp.task('inlinecss', ['sassInline', 'nunjucks'], function() { return gulp.src('build/*.html') .pipe( inlineCss({ applyStyleTags: false, removeStyleTags: false }) .on('error', gutil.log) ) .pipe(gulp.dest('build/')) .pipe(connect.reload()); }); /* ************* TEMPLATING ************* */ var nunjucksRender = require('gulp-nunjucks-render'); var data = require('gulp-data'); gulp.task('nunjucks', ['sassEmbedded'], function() { return gulp.src('src/emails/*.nunjucks') .pipe( data(function() { return globalData; }) .on('error', gutil.log) ) .pipe( nunjucksRender({ path: ['src/templates/', 'build/css/'] }) .on('error', gutil.log) ) .pipe(gulp.dest('build/')); }); /* ************* ZIP ************* */ var zip = require('gulp-zip'); gulp.task('zip', function () { return gulp.src('build/**') .pipe(zip('build.zip')) .pipe(gulp.dest('./')); }); /* ************* SERVER ************* */ var connect = require('gulp-connect'); gulp.task('connect', function() { connect.server({ port: 8000, root: 'build', // Serve from build directory instead, livereload:true }); }); /* ************* WATCH ************* */ var filesToWatch = [ 'src/sass/**/*.scss', 'src/emails/*.nunjucks', 'src/templates/**/*.nunjucks', 'src/data/*.json' ] gulp.task('watch', function() { gulp.watch(filesToWatch,['nunjucks', 'inlinecss']); }); /* ************* DEFAULT ************* */ gulp.task('default', ['connect', 'nunjucks', 'inlinecss', 'watch']); ================================================ FILE: license.txt ================================================ The MIT License (MIT) Copyright (c) [2016] [Ire Aderinokun] Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: package.json ================================================ { "name": "gulp-email-workflow", "description": "A workflow for building HTML email using Gulp", "version": "1.0.0", "author": "Ire Aderinokun", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/ireade/gulp-email-workflow" }, "main": "gulpfile.js", "devDependencies": { "autoprefixer": "^6.3.6", "gulp": "^3.9.1", "gulp-connect": "^3.2.2", "gulp-data": "^1.2.1", "gulp-inline-css": "^3.1.0", "gulp-nunjucks-render": "^2.0.0", "gulp-postcss": "^6.1.0", "gulp-sass": "^2.2.0", "gulp-util": "^3.0.7", "gulp-zip": "^3.2.0", "postcss-scss": "^0.1.7" }, "scripts": { "start": "gulp", "zip": "gulp zip" } } ================================================ FILE: src/data/mailchimp.json ================================================ { "campaign_title": "", "campaign_url": "", "page_title": "*|MC:SUBJECT|*", "publisher_name": "*|LIST:COMPANY|*", "publisher_url": "*|LIST:URL|*" } ================================================ FILE: src/emails/index.nunjucks ================================================ {% extends "mailchimp.nunjucks" %} {% block preheader %} A gulp workflow for building HTML emails {% endblock %} {% block email_title %} Gulp Email Workflow {% endblock %} {% block email_subtitle %} Build Better Emails {% endblock %} {% block email_content %}

Gulp Email Workflow is a simple workflow for building HTML emails using Gulp.js. Lorem Khaled Ipsum is a major key to success. Find peace, life is like a water fall, you’ve gotta flow. They don’t want us to win. Wraith talk. Cloth talk.

Sample Content

A code block

.hg { 
  display: grid; 
  grid-template-areas: "header header header" 
		       "navigation main ads" 
		       "footer footer footer";
  grid-template-columns: 150px 1fr 150px; 
  grid-template-rows: 100px 1fr 30px; 
  min-height: 100vh; 
}

An unordered list

An ordered list

  1. List item one
  2. List item two
  3. List item three

A block quote

The first of the month is coming, we have to get money, we have no choice.
{% endblock %} {% block email_footer %} Thank you for reading! {% endblock %} ================================================ FILE: src/sass/_reset.scss ================================================ /* RESET */ body { margin:0; padding:0; width: 100%; height:100% !important; } img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; max-width: 100% } table { border-collapse:collapse !important; } /* CLIENT SPECIFIC STYLES */ /* Force Outlook to provide a "view in browser" message */ #outlook a { padding:0; } .ReadMsgBody{ width:100%; } .ExternalClass { width:100%; line-height: 100%; p, span, font, td, div { line-height: 100%; } } body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%; } /* Remove spacing between tables in Outlook 2007 and up */ table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Allow smoother rendering of resized image in Internet Explorer */ img { -ms-interpolation-mode:bicubic; } ================================================ FILE: src/sass/embedded.scss ================================================ #template-content { a:link, a:visited, a.yshortcuts { color: #000; font-weight:normal; text-decoration:underline; } h2 { margin-top: 30px; margin-bottom: 20px; } h3 { margin-top: 30px; margin-bottom: 10px; } img { display:inline; height:auto; width: 100%; } p { margin: 0 0 20px; } pre { display: block; width: 90%; overflow-x: scroll; background-color: #F5F5F5; padding: 15px; } code { background-color: #F5F5F5; } blockquote { margin: 0 0 10px; border-left: 5px solid #F5F5F5; padding: 5px 10px; font-style: italic; } } ================================================ FILE: src/sass/inline.scss ================================================ @import 'reset' ; $font-stack: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; $theme: rgb(255, 219, 58); $bg-color: #F5F5F5; body { background-color: $bg-color; } a { color: #000; } #body-container { width: 100%; max-width: 600px; margin: 20px auto; } /* ********************** Preheader ********************** */ #template-preheader { td { padding: 15px 10px; font-family: $font-stack; font-style: italic; color: #606060; font-size: 13px; } td:last-child { text-align: right; } } /* ********************** Main Content ********************** */ #template-content { background-color: #fff; box-shadow: 2px 2px 3px rgba(150, 150, 150, 0.2) } #template-content-header { text-align: center; position: relative; td { background-color: $theme; padding: 20px 15px; font-family: $font-stack; } } .email-title { line-height:120%; color: #000; font-size: 24px; font-weight: 700; text-decoration: none; } .email-subtitle { font-size: 16px; } /* */ #template-content-content { width: 90%; max-width: 560px; text-align: left; font-family: $font-stack; font-weight: 400; font-size: 16px; line-height:150%; margin: 30px 0; } /* */ #template-content-footer { tr { background-color: rgb(240, 240, 240); } td { padding: 20px 15px; font-family: $font-stack; font-weight: 400; line-height:125%; font-size: 15px; } } /* ********************** Footer ********************** */ #template-footer { td { font-family: $font-stack; color: #606060; font-size: 11px; line-height: 150%; text-align:center; padding: 30px 10px 20px; } p { display: block; margin-bottom: 15px; } } ================================================ FILE: src/templates/mailchimp.nunjucks ================================================ {% include "partials/header.nunjucks" %}
{% block preheader %}{% endblock %} View this email in your browser

{% block email_title %}{% endblock %}

{% block email_content %}{% endblock %}
{% block email_footer %}{% endblock %}
{% include "partials/footer.nunjucks" %} ================================================ FILE: src/templates/partials/footer.nunjucks ================================================ ================================================ FILE: src/templates/partials/header.nunjucks ================================================ {{mailchimp.page_title}}