Package Exports

gulp-mc-inline-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-mc-inline-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gulp-inline-css

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>

<html>
  <head>

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