/gulp-mc-inline-css

A gulp plugin for sending HTML to mailchimp's CSS API

Primary LanguageJavaScriptMIT LicenseMIT

gulp-inline-css NPM version Build status

Takes HTML style tags and converts it to inline CSS using MailChimp's CSS Inliner API for Gulp 3

Usage

First, install gulp-mc-inline-css as a development dependency:

npm install --save-dev gulp-mc-inline-css

Then, add it to your gulpfile.js:

var inline = require('gulp-mc-inline-css');

gulp.task('inliner', function() {
  gulp.src('client/html/*.html')
    .pipe(inline(APIKEY))
    .pipe(gulp.dest('dist/email');
});

API

inliner(APIKEY)

APIKEY

Type: String

A required string containing your MailChimp API Key. A best practice is to create a config.json file with an APIKEY and call inliner like so:

{
 "APIKEY": "zowizjzowjoij#example#madeup#key"
}
var config = require('./config.json');
gulp.src('client/css/*.css')
  .pipe(inline(config.APIKEY))
  .pipe(gulp.dest('dist/email'));

Results

Converts the below HTML to the following

<html>
  <head>
    <style>
      div { color: #fff; background: #000; }
    </style>
  </head>
  <body>
    <div>Hello World</div> 
  </body>
</html>

to

<html>
  <head>

  </head>
  <body>
    <div style="color:#fff;background:#000;">Hello World</div> 
  </body>
</html>