<commit_before># Grunt Email Design Workflow

Designing and testing emails is a pain. HTML tables, inline CSS, various devices and clients to test, and varying support for the latest web standards.

This grunt task helps simplify things at the design stage.

1. Compiles your SCSS to CSS

2. Builds your HTML and TXT email templates

3. Inlines your CSS

4. Uploads any images to a CDN (optional)

5. Sends you a test email to your inbox (optional)

## Requirements

* Node.js - [Install Node.js](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)
* Grunt-cli and Grunt (`npm install grunt-cli -g`)
* Ruby - [Install ruby with RVM](https://rvm.io/rvm/install)
* Premailer (`gem install premailer hpricot nokogiri`) - Inlines the CSS
* [Mailgun](http://www.mailgun.com) (optional) - Sends the email
* [Litmus](https://litmus.com) (optional) - Tests the email across all clients/browsers/devices
* [Rackspace Cloud](http://www.rackspace.com/cloud/files/) (optional) - Uses Cloud Files as a CDN

## Getting started

If you haven't used [Grunt](http://gruntjs.com/) before check out Chris Coyier's post on [getting started with Grunt](http://24ways.org/2013/grunt-is-not-weird-and-hard/).

Clone this repo, cd to the directory, run `npm install` to install the necessary packages.

```
git clone https://github.com/leemunroe/grunt-email-design.git
cd grunt-email-design
npm install
grunt
```

### Sensitive Information
We encourage you __not__ to store sensitive data in your git repository. If you must, please look into [git-encrypt](https://github.com/shadowhand/git-encrypt) or some other method of encrypting your configuration secrets.

1. Create a file `secrets.json` in your project root.
2. Paste the following sample code in `secrets.json` and enter the appropriate credentials for the services you want to connect with. It's ok to leave these defaults, but they should exist.

```
{
  "mailgun": {
    "api_key": "YOUR MG PRIVATE API KEY"
  },
  "litmus": {
    "username": "LITMUS USER NAME",
    "password": "<PASSWORD>"
  },
  "cloudfiles": {
    "user": "CLOUDFILES USERNAME",
    "key": "CLOUDFILES KEY"
  }
}
```



## How it works

<img src="http://i.imgur.com/yrHpTdr.jpg" width="500">

### CSS<commit_msg>Update readme with secrets example<commit_after># Grunt Email Design Workflow

Designing and testing emails is a pain. HTML tables, inline CSS, various devices and clients to test, and varying support for the latest web standards.

This grunt task helps simplify things at the design stage.

1. Compiles your SCSS to CSS

2. Builds your HTML and TXT email templates

3. Inlines your CSS

4. Uploads any images to a CDN (optional)

5. Sends you a test email to your inbox (optional)

## Requirements

* Node.js - [Install Node.js](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)
* Grunt-cli and Grunt (`npm install grunt-cli -g`)
* Ruby - [Install ruby with RVM](https://rvm.io/rvm/install)
* Premailer (`gem install premailer hpricot nokogiri`) - Inlines the CSS
* [Mailgun](http://www.mailgun.com) (optional) - Sends the email
* [Litmus](https://litmus.com) (optional) - Tests the email across all clients/browsers/devices
* [Rackspace Cloud](http://www.rackspace.com/cloud/files/) (optional) - Uses Cloud Files as a CDN

## Getting started

If you haven't used [Grunt](http://gruntjs.com/) before check out <NAME>'s post on [getting started with Grunt](http://24ways.org/2013/grunt-is-not-weird-and-hard/).

Clone this repo, cd to the directory, run `npm install` to install the necessary packages.

```
git clone https://github.com/leemunroe/grunt-email-design.git
cd grunt-email-design
npm install
grunt
```

### Sensitive Information
We encourage you __not__ to store sensitive data in your git repository. If you must, please look into [git-encrypt](https://github.com/shadowhand/git-encrypt) or some other method of encrypting your configuration secrets.

1. Create a file `secrets.json` in your project root.
2. Paste the following sample code in `secrets.json` and enter the appropriate credentials for the services you want to connect with. It's ok to leave these defaults, but they should exist.

```
{
  "mailgun": {
    "api_key": "YOUR MG PRIVATE API KEY",
    "sender": "E.G. <EMAIL>",
    "recipient": "WHO YOU WANT TO SEND THE EMAIL TO"
  },
  "litmus": {
    "username": "LITMUS USER NAME",
    "password": "<PASSWORD>",
    "company": "LITMUS COMPANY/API SUBDOMAIN NAME"
  },
  "cloudfiles": {
    "user": "CLOUDFILES USERNAME",
    "key": "CLOUDFILES KEY",
    "region": "CLOUDFILES REGION E.G. ORD",
    "container": "CLOUDFILES CONTAINER NAME",
    "uri": "CLOUDFILES URI"
  }
}
```



## How it works

<img src="http://i.imgur.com/yrHpTdr.jpg" width="500">

### CSS
{'fraction_non_alphanumeric': 0.12200755984880303, 'fraction_numerical': 0.006719865602687947, 'mean_word_length': 4.003151260504202, 'pattern_counts': {'":': 22, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4952624', 'n_tokens_mistral': 1597, 'n_tokens_neox': 1530, 'n_words': 555}