[ { "path": ".gitignore", "content": "node_modules\nbuild.zip\n" }, { "path": "README.md", "content": "# A Gulp Workflow for Building HTML Emails\n\n\n![Sample Email Template ](screenshot.png)\n\nThis is a workflow for building HTML emails using Gulp. It comes with a default MailChimp-supported template.\n\nWhat it does -\n\n1. Builds HTML email from templates and partials\n2. Compiles SCSS to CSS\n3. Inlines the `inline.css` file and embeds the `embedded.css` file\n4. Generates a preview of emails\n5. Creates a zip of the build directory for upload (optional)\n\n\n\n\n## Getting Started\n\n\n#### 1. Install dependencies\n\nThis workflow requires the following dependencies -\n\n- Node.js with npm ([Install](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager))\n- Gulp.js (Install with `npm install gulp`)\n\n\n#### 2. Clone this repository\n\n\n```\ngit clone https://github.com/ireade/gulp-email-workflow.git\ncd gulp-email-workflow\n```\n\nOr [download as a ZIP](https://github.com/ireade/gulp-email-workflow/archive/master.zip).\n\n\n\n\n#### 3. Install packages\n\n```\nnpm install\n```\n\n\n#### 4. Start build\n\n```\nnpm start\n```\n\nThe compiled and inlined output email will be in the `build/` directory. Can be previewed in browser at `http://localhost:8000`\n\n\n\n\n## How to use\n\n#### Creating templates\n\n[Nunjucks](https://mozilla.github.io/nunjucks/) is used for compiling template files to HTML.\n\nTemplates 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. \n\nTo include a partial in your template, use the following syntax -\n\n\n```\n{% include \"partials/PARTIAL_FILE_NAME.nunjucks\" %}\n```\n\nTo define a block of dynamic content to be replaced by the email file, use the following syntax -\n\n```\n{% block CUSTOM_BLOCK_NAME %}{% endblock %}\n```\n\n\n#### Creating emails from templates\n\nTo create an email based off a template file, create a new file in the `src/emails/` directory (also with the `.nunjucks` file extension).\n\nSpecify which template to use using the following syntax -\n\n```\n{% extends \"TEMPLATE_NAME.nunjucks\" %}\n```\n\nTo define the contents of a dynamic content block, use the following syntax -\n\n```\n{% block CUSTOM_BLOCK_NAME %} \nContent goes here\n{% endblock %}\n```\n\n\n#### Working with global data\n\nGlobal 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` - \n\n```javascript\nvar globalData = {\n DATA_NAME_1: require('./src/data/FILE_NAME_1.json'),\n DATA_NAME_2: require('./src/data/FILE_NAME_2.json')\n};\n\n```\n\nFor example -\n\n```javascript\nvar globalData = {\n mailchimp: require('./src/data/mailchimp.json')\n};\n\n```\n\n\n\n\n#### CSS\n\nSASS files are stored in the `src/sass/` directory. There are two main SASS files -\n\n- `inline.scss` for styles you w Liant to be inlined to their elements\n- `embedded.scss` for styles that shouldn't be inlined. These will be inlcluded within a `\n\n\n\n
\n
\n \n \n
\n
\n
\n
\n\n \n \n \n \n \n \n
\n \nA gulp workflow for building HTML emails\n\n \n View this email in your browser\n
\n\n\n \n
\n\n \n \n \n \n \n
\n

\n \nGulp Email Workflow\n\n

\n

\n \nBuild Better Emails\n\n

\n
\n\n\n \n
\n \n

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.

\n\n

Sample Content

\n\n

A code block

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

An unordered list

\n\n
    \n\t
  • List item one
    • \n\t
  • List item two
    • \n\t
  • List item three
    • \n
\n\n

An ordered list

\n\n
    \n\t
  1. List item one
    2. \n\t
  2. List item two
    3. \n\t
  3. List item three
    4. \n
\n\n

A block quote

\n\n
\n\tThe first of the month is coming, we have to get money, we have no choice. \n
\n\n\n
\n\n\n \n \n \n \n \n
\n \nThank you for reading!\n\n
\n\n
\n \n\n\n \n \n \n \n \n
\n

\n This email was sent to *|EMAIL|*\n

\n

\n why did I get this?    unsubscribe from this list    update subscription preferences\n

\n

\n Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.
\n *|LIST:ADDRESSLINE|*\n \n

\n

*|REWARDS|*

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

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.

\n\n

Sample Content

\n\n

A code block

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

An unordered list

\n\n\n\n

An ordered list

\n\n
    \n\t
  1. List item one
    2. \n\t
  2. List item two
    3. \n\t
  3. List item three
    4. \n
\n\n

A block quote

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

\n {% block email_title %}{% endblock %}\n

\n

\n {% block email_subtitle %}{% endblock %}\n

\n
\n\n\n \n
\n {% block email_content %}{% endblock %}\n
\n\n\n \n \n \n \n \n
\n {% block email_footer %}{% endblock %}\n
\n\n
\n \n\n\n \n \n \n \n \n
\n

\n This email was sent to *|EMAIL|*\n

\n

\n why did I get this?    unsubscribe from this list    update subscription preferences\n

\n

\n Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.
\n *|LIST:ADDRESSLINE|*\n \n

\n

*|REWARDS|*

\n
\n\n
\n{% include \"partials/footer.nunjucks\" %}" }, { "path": "src/templates/partials/footer.nunjucks", "content": "\n" }, { "path": "src/templates/partials/header.nunjucks", "content": "\n\n\n \n \n \n \n\n {{mailchimp.page_title}}\n\n \n \n\n\n\n
\n
\n \n \n
\n
\n
" } ]