Making Email Testing Easier with Grunt.js, Mailgun and Amazon S3

After seeing Lee Munroe’s excellent Grunt.js script for automating the email design testing process, I decided to expand on it and fork it over to my development process. Both Grunt and Gulp have made enormous contributions to my workflow in recent months. And when it comes to designing, building, and testing emails, automation is key.

When testing an email campaign, here’s what’s needed:

  • Legacy code that works across email clients (especially Outlook)
  • A place to host images
  • A way to send test emails
  • And, preferably, a tool to render test emails in different environments

Lee’s script handles all of this, from using Handlebar templates for multiple email bodies to compiling Sass and inlining the styles. Mailgun then steps in to send out the freshly created email code to whatever email account you want.

The only modifications I made to this script was to dump Rackspace Cloud Files in favor of Amazon s3. I also added support for image optimization. Here’s the code I added to my Gruntfile:

imagemin: {
  png: {
    options: {
      optimizationLevel: 7
    },
    files: [
      {
        expand: true,
        cwd: 'src/img',
        src: ['**/*.png'],
        dest: 'dist/img',
        ext: '.png'
      }
    ]
  },
  jpg: {
    options: {
      progressive: true
    },
    files: [
      {
        expand: true,
        cwd: 'src/img/',
        src: ['**/*.jpg'],
        dest: 'dist/img',
        ext: '.jpg'
      }
    ]
  }
},
s3: {
  options: {
    key: '###',
    secret: '###’,
    access: 'public-read',
    region: 'us-east-1',
    headers: {
      // Two Year cache policy (1000 * 60 * 60 * 24 * 730)
      "Cache-Control": "max-age=630720000, public",
      "Expires": new Date(Date.now() + 63072000000).toUTCString()
    }
  },
  dev: {
    // These options override the defaults
    options: {
      maxOperations: 20,
      bucket: 'BUCKETNAME'
    },
    // Files to be uploaded.
    upload: [
      {
        src: 'dist/**/*',
        dest: 'public/emails/',
        rel: 'dist', // rel must be set to maintain directory structure of src
        options: { gzip: true }
      }
    ]
  }
}

A couple of notes on implementing Amazon S3 for Grunt. First, you must define the region. For my purposes, I selected us-east-1, but you change this based on your geographic preference. Additionally, you must make sure “rel” is set to your main source directory. Otherwise, all of the files get dumped into the first-level directory.

For testing your emails across different environments, you can use a tools like Litmus. Just change the Mailgun email address in your Gruntfile to the Litmus testing email and then run the task.

Here’s the branch I created with these updates for anyone interested.

See more posts