Combine Html and Css into an email

npm install grunt-email-builder
7 downloads in the last day
26 downloads in the last week
147 downloads in the last month


Inline css into HTML or inline css into styletags for emails. You can then send files to Litmus for testing.

NPM version Build Status Dependency Status Built with Grunt

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-email-builder

Then add this line to your project's grunt.js gruntfile:



Place this in your grunt file.

 emailBuilder: {
  test :{
    files : {
      'dest/ouput.html' : 'src/input.html'

To prevent styles from being inlined, use the data-ignore attribute on embedded or external styles. Otherwise, all styles will be inlined. External styles with the data-ignore attribute will be embedded in their own <style> tag within the src document.

<!-- external styles -->
<link rel="stylesheet" data-ignore="ignore"  href="../css/style.css" />

<!-- embedded styles -->
<style data-ignore="ignore">
 /* styles here will not be inlined */



Type: Object

Send yourself a test email

  emailTest : {

    // Your Email
    email : ''

    // Your email Subject
    subject : 'Email Subject'


Type: Object

Send email tests to Litmus

litmus : {

  // Optional, defaults to title of email or yyyy-mm-dd if title and options.subject not set
  subject : 'Custom subject line',

  // Litmus username
  username : 'username',

  // Litmus password
  password : 'password',

  // Url to your Litmus account
  url : '',

  // Email clients to test for. Find them at
  // The <application_code> tags contain the name e.g. Gmail Chrome: <application_code> chromegmailnew </application_code>
  applications : ['gmailnew', 'hotmail', 'outlookcom', 'ol2000', 'ol2002', 'ol2003', 'ol2007', 'ol2010','ol2011', 'ol2013', 'appmail6','iphone4', 'iphone5', 'ipad3']


Type: Boolean Default: true

If set to false, Doctype will be stripped from dest file.


Type: Boolean Default: false

If set to true, special characters will be encoded to their numerical value. e.g. © --> &#169;

Example Usage

  inline: {
    files: { 'dest/output.html' : 'src/input.html' },
    options: {
      encodeSpecialChars: true
  litmus: {
    files: { 'dest/output.html' : 'src/input.html' },
    options: {
      encodeSpecialChars: true,
      litmus: {
        username: 'username',
        password: 'password',
        url: '',
        applications: ['gmailnew', 'ffgmail', 'chromegmail']

grunt.registerTask('inline', 'emailBuilder:inline');
grunt.registerTask('litmus', 'emailBuilder:litmus');

Windows Installation Guide

  • Make sure the latest Python 2.7.* is installed.
  • Right click on Computer/My Computer and go to Properties, go to Advanced System Settings, then Environment Variables.
  • Set the environment variable for "PYTHON" to where you installed Python27, eg C:\Python27\python.exe is the default.
  • If Visual Studio is not installed, install Visual Studio 2010. If you are using a later version of Visual Studio, eg 2012 or 2013, set the environment variable "GYP_MSVS_VERSION" to the corresponding version of Visual Studio.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.


Thanks for helping out:

Thanks to

Juice for compiling.

Release History


  • Send yourself a test email with options.emailTest
  • Update to grunt 4.4
  • Update Dependencies
  • Change gruntfile to coffeescript

Previous Updates

  • 1.1.5 Allow options.litmus to run multiple tests
  • 1.1.0 Added options.doctype and options.encodeSpecialChars.
  • 1.0.0 Removed data-placement attribute in place of data-ignore. Improved options.litmus to send new versions of existing tests instead of creating new test.
  • 0.0.3 Inline css from style tags
  • 0.0.22 Bug Fixes
  • 0.0.2 Upgrade to grunt 0.4


Copyright (c) 2013 Steven Miller Licensed under the MIT license.

npm loves you