Merge pull request #2 from happymedium/dev

Implement Nodemailer for test emails

Gruntfile.js

@@ -3,6 +3,9 @@ module.exports = function(grunt) {
 
 	var path = require('path');
 
+    // Allow user to specify template to send through the CLI
+    var template = grunt.option('template');
+
 	require('load-grunt-tasks')(grunt);
 
 	grunt.initConfig({
@@ -74,6 +77,8 @@ module.exports = function(grunt) {
 
         /**
          * Insert the media query css into the document manually.
+         * 
+         * Remember: you'll need to update each style section as you add/remove templates.
          */
         htmlbuild: {
             dist: {
@@ -82,7 +87,10 @@ module.exports = function(grunt) {
                 options: {
                     relative: true,
                     styles: {
-                        mq: '<%= paths.css %>/mq.css'
+                        basic: ['<%= paths.css%>/basic.css','<%= paths.css %>/mq.css'],
+                        hero: ['<%= paths.css%>/hero.css','<%= paths.css %>/mq.css'],
+                        sidebar: ['<%= paths.css%>/sidebar.css','<%= paths.css %>/mq.css'],
+                        sidebarHero: ['<%= paths.css%>/sidebar-hero.css','<%= paths.css %>/mq.css']
                     }
                 }
             }
@@ -105,6 +113,39 @@ module.exports = function(grunt) {
             }
         },
 
+        // Send a test email to whomever we choose
+        nodemailer: {
+
+            options: {
+
+                /**
+                 * Defaults to sendmail if you don't specify a transport below
+                 * See config/nodemailer-transport.json for a sample Gmail config,
+                 * or visit https://github.com/andris9/Nodemailer for all options
+                 */
+                transport: grunt.file.readJSON('config/nodemailer-transport.json'),
+
+                // By default, generate text from our HTML template automatically
+                generateTextFromHTML: true,
+
+                message: {
+                    from: 'From Name <[email protected]>',
+                    subject: 'Email template test'
+                },
+
+                // A collection of recipients
+                recipients: [{
+                    email: '[email protected]',
+                    name: 'Recipient Name'
+                }]
+            },
+
+            // Load the HTML template from our dist directory.
+            dist: {
+                src: ['<%= paths.dist %>/' + template + '.html']
+            }
+        },
+
         /**
          * Inline the CSS from the external file into the document
          * This also copies the templates into the /dist/ folder
@@ -180,6 +221,18 @@ module.exports = function(grunt) {
     // To distribute, do the other two steps
     grunt.registerTask('dist', ['compass', 'clean', 'imagemin', 'render:dist', 'premailer', 'htmlbuild']);
 
+    // Register a send tast to simulate an email delivery
+    grunt.registerTask('send', 'Simulates an email delivery.', function() {
+        if ( !template ) {
+            grunt.fail.fatal('You need to specify a template to send: --template=templateName');
+        }
+
+        grunt.task.run([
+            'dist',
+            'nodemailer'
+        ]);
+    });
+
     // By default, do the dev version
 	grunt.registerTask('default', ['dev']);
 }

README.md

@@ -1,7 +1,7 @@
 Responsive Email Kit
 ====================
 
-A fork of Zurb's excellent [Ink responsive email template system](http://zurb.com/ink/) integrated into a Grunt and Sass/Compass workflow for automated CSS inlining, quicker editing, and image minification.
+A fork of Zurb's excellent [Ink responsive email template system](http://zurb.com/ink/) integrated into a Grunt and Sass/Compass workflow for automated CSS inlining, quicker editing, image minification, and email testing.
 
 ## Installation
 
@@ -52,6 +52,14 @@ Remember, your CSS has already been inlined, so you don't need to do that step m
 
 You will also need to upload your images from the `/dist/img/` folder to whatever email marketing service you use.
 
+### Email Testing
+
+You can use [Nodemailer](https://github.com/andris9/Nodemailer) to send a test email with your template via the command line.
+
+1. Configure the Sender and Recipient fields within the `nodemailer` task in `Gruntfile.js`
+2. Set the values of your transport method inside `config/nodemailer-transport.json`. An example Gmail method is there right now; you can check [Nodemailer's site](https://github.com/andris9/Nodemailer#well-known-services-for-smtp) for other options.
+3. From the command line, run `grunt send --template=YOURTEMPLATENAME` (without the `.html` appended). This will run the `dist` task before sending it using Nodemailer.
+
 ## Editing
 
 Edit templates within the `/templates/` directory. You can add or remove them as you'd like.
@@ -60,6 +68,15 @@ To add new CSS files, it is recommended to create a new Sass (`.scss`) file for
 
 ## Changelog
 
+### 1.2.0
+
+Fixed a few bugs and implemented email testing.
+
+* Fix error in JSON watch path
+* Update partials watch path to account for nested partials
+* Implement Nodemailer and Grunt send task (thanks to @dwightjack and his [Grunt Email Boilerplate](https://github.com/dwightjack/grunt-email-boilerplate) for inspiration)
+* Updated the `htmlbuild` task and tags to have the basic stylesheet also printed out in a `<style>` tag, allowing for usage of web fonts and other things that get stripped
+
 ### 1.1.0
 
 * Implemented EJS for templating, partials, and data integration.

config/nodemailer-transport.json

@@ -0,0 +1,10 @@
+{
+	"type": "SMTP",
+	"options": {
+		"service": "Gmail",
+		"auth": {
+			"user": "GMAIL_USERNAME",
+			"pass": "GMAIL_PASSWORD"
+		}
+	}
+}

package.json

@@ -5,7 +5,7 @@
     "name": "Josh Larson",
     "url": "https://github.com/jplhomer"
   },
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/happymedium/responsive-email-kit"
@@ -43,6 +43,7 @@
     "js-beautify": "~1.3.4",
     "grunt-html-build": "~0.3.1",
     "grunt-contrib-imagemin": "~0.4.1",
-    "grunt-ejs-render": "~0.2.2"
+    "grunt-ejs-render": "~0.2.2",
+    "grunt-nodemailer": "~0.2.0"
   }
 }

partials/basic/header.html

@@ -4,7 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width"/>
     <link rel="stylesheet" href="../css/basic.css" />
-    <!-- build:style inline mq --><!-- /build -->
+    <!-- build:style inline basic --><!-- /build -->
 </head>
 <body>
     <table class="body">

partials/hero/header.html

@@ -4,7 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width"/>
     <link rel="stylesheet" href="../css/hero.css" />
-    <!-- build:style inline mq --><!-- /build -->
+    <!-- build:style inline hero --><!-- /build -->
 </head>
 <body>
     <table class="body">

partials/sidebar-hero/header.html

@@ -4,7 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width"/>
     <link rel="stylesheet" href="../css/sidebar-hero.css" />
-    <!-- build:style inline mq --><!-- /build -->
+    <!-- build:style inline sidebarHero --><!-- /build -->
 </head>
 <body>
     <table class="body">

partials/sidebar/header.html

@@ -4,7 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width"/>
     <link rel="stylesheet" href="../css/sidebar.css" />
-    <!-- build:style inline mq --><!-- /build -->
+    <!-- build:style inline sidebar --><!-- /build -->
 </head>
 <body>
     <table class="body">