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

Transcript

1. HOW TO AUTOMATE YOUR EMAIL DESIGN WORKFLOW WITH TASK RUNNERS @leemunroe
2. @leemunroe
3. @leemunroe
4. @leemunroe
5. @leemunroe
6. British Isles @leemunroe
7. Great Britain @leemunroe
8. Ireland @leemunroe
9. Northern Ireland @leemunroe
10. United Kingdom @leemunroe
11. @leemunroe
12. @leemunroe
13. @leemunroe
14. @leemunroe
15. @leemunroe
16. @leemunroe
17. @leemunroe
18. @leemunroe
19. @leemunroe
20. @leemunroe
21. 12 HOURS @leemunroe
22. 12 HOURS 2½ HOURS @leemunroe
23. @leemunroe
24. WRITE HTML @leemunroe
25. COMPILE TEMPLATES @leemunroe
26. INLINE CSS @leemunroe
27. PLAIN TEXT @leemunroe
28. COMPRESS IMAGES @leemunroe
29. UPLOAD IMAGES @leemunroe
30. ADD TRACKING @leemunroe
31. SEND TO MYSELF @leemunroe
32. SEND TO COLLEAGUE @leemunroe
33. SEND TO LITMUS @leemunroe
34. COPY & PASTE @leemunroe
35. "Hey, can you make the logo bigger?" @leemunroe
36. @leemunroe
37. Bill Gates, Founder Microsoft @leemunroe
38. "I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it." @leemunroe
39. I'M LAZY @leemunroe
40. @leemunroe
41. WHY USE A TASK RUNNER? AUTOMATION @leemunroe
42. GRUNT.JS @leemunroe
43. @leemunroe
44. @leemunroe
45. @leemunroe
46. PRECURSORS @leemunroe
47. Command Line @leemunroe
48. j.mp/intro-to-command-line @leemunroe
49. nodejs.org/download @leemunroe
50. $ npm install -g grunt-cli @leemunroe
51. HOW TO INLINE CSS AUTOMATICALLY USING GRUNT.JS @leemunroe
52. @leemunroe
53. @leemunroe
54. @leemunroe
55. @leemunroe
56. @leemunroe
57. @leemunroe
58. @leemunroe
59. @leemunroe
60. @leemunroe
61. @leemunroe
62. @leemunroe
63. @leemunroe
64. @leemunroe
65. gruntjs.com/plugins @leemunroe
66. $ npm install grunt-inline-css --save-dev @leemunroe
67. @leemunroe
68. @leemunroe
69. @leemunroe
70. @leemunroe
71. @leemunroe
72. @leemunroe
73. $ grunt @leemunroe
74. @leemunroe
75. @leemunroe
76. @leemunroe
77. github.com/leemunroe/grunt-demo @leemunroe
78. @leemunroe
79. @leemunroe
80. @leemunroe
81. WORKFLOW @leemunroe
82. HOW TO AUTOMATE YOUR EMAIL TEMPLATE SYSTEM USING GRUNT.JS @leemunroe
83. @leemunroe
84. github.com/leemunroe/grunt-email-workflow @leemunroe
85. github.com/leemunroe/grunt-email-workflow @leemunroe
86. @leemunroe
87. @leemunroe
88. @leemunroe
89. @leemunroe
90. @leemunroe
91. PUSH TO YOUR TEMPLATE HOST @leemunroe
92. SINGLE SOURCE OF TRUTH @leemunroe
93. COMMON GOTCHAS @leemunroe
94. SOURCE: HTTP://CDN-AK.F.ST-HATENA.COM/IMAGES/FOTOLIFE/T/ TYOSHIKAWA1106/20150115/20150115212956.PNG @leemunroe
95. $ sudo npm install ... @leemunroe
96. @leemunroe
97. @leemunroe
98. $ npm install @leemunroe
99. @leemunroe
100. DOWNSIDES ▸ Learning curve ▸ Lack of creativity ▸ Lose control ▸ Command line / dependencies @leemunroe
101. ADVANTAGES ▸ DRY (Don't Repeat Yourself) Automation ▸ Single source of truth ▸ Consistency ▸ Not locked in ▸ More time for other stuff @leemunroe
102. Task runners take your email design workflow to 88mph @leemunroe
103. @leemunroe @leemunroe
104. 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