gulp-mc-inline-css

Gulp plugin to send HTML to Mail Chimp's Inline CSS API

gulp-inline-css

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

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');
});

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'));

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>