Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to automate your email design workflow with task runners & Grunt.js

Lee Munroe
August 28, 2015

How to automate your email design workflow with task runners & Grunt.js

As email designers we know building HTML email isn't straight forward. There are endless tasks required to create a seamless email experience for our end users. However in today's world we can use some of our favorite front-end development tools to help optimize our workflow and save our sanity. We'll cover:

* What task runners and build systems are
* An introduction to Grunt.js and how to use it
* Using a Grunt.js workflow to fully automate your email build process
* How to compile HTML, inline CSS/Sass, compress and upload images, and test your emails with Litmus by running just one command

Presented at Litmus Email Design Conference, Boston 2015

Lee Munroe

August 28, 2015
Tweet

More Decks by Lee Munroe

Other Decks in Technology

Transcript

  1. "I choose a lazy person to do a hard job.

    Because a lazy person will find an easy way to do it." @leemunroe
  2. DOWNSIDES ▸ Learning curve ▸ Lack of creativity ▸ Lose

    control ▸ Command line / dependencies @leemunroe
  3. ADVANTAGES ▸ DRY (Don't Repeat Yourself) Automation ▸ Single source

    of truth ▸ Consistency ▸ Not locked in ▸ More time for other stuff @leemunroe
  4. RESOURCES REFERENCED * Grunt Email Workflow (github.com/leemunroe/grunt-email-workflow) * Grunt Inline

    CSS Demo (github.com/leemunroe/grunt-demo) * Mailgun (mailgun.com) * Rackspace (rackspace.com) * Litmus (litmus.com/lp/mailgun) * Assemble (assemble.io) * Grunt (gruntjs.com) * Gulp (gulpjs.com) * Sendwithus (sendwithus.com) * Ink (zurb.com/ink) * Command Line (j.mp/intro-to-command-line) @leemunroe