Help us understand the problem. What is going on with this article?

HTMLメール作成時のインラインスタイル化をgulpで行う

More than 3 years have passed since last update.

別の記事でも書きましたが、HTMLメールを作るときはスタイルをインラインで書かないといけません。
もちろん、直接インラインでスタイルを定義するのは大変なので、<style>タグに書かれたCSSをインライン化するWebサービス(ジェネレータ)なんかを使ってインラインスタイル化したりするわけですが、いちいちジェネレータにソースをコピペするのは面倒くさいです。
ソースが変更されたら、インラインでスタイルが書かれたHTMLファイルが自動生成されるのが望ましい。

というわけでGulpです。
以下のような一連のタスクを、ファイルが変更される度に実行します。
EJSはお試しで使ってみた感じ。

  1. EJSからHTMLを生成
  2. SassからCSSを生成
  3. 2で生成したCSSを1で生成したHTMLにインラインで挿入
  4. 完成したHTMLをminify

全然大したことしてないですね。
gulpfileや必要なパッケージは以下のとおりなので、HTMLメールを作る人は是非。

gulpfile.babel.js
import gulp from 'gulp';
import ejs from 'gulp-ejs';
import sass from 'gulp-sass';
import inlineCss from 'gulp-inline-css';
import htmlmin from 'gulp-htmlmin';
import plumber from 'gulp-plumber';
import notify from 'gulp-notify';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';

const dir = {
    path: '',
    src: 'src',
    dst: 'dst'
};

const options = {
    ejs: {},

    sass: {
        outputStyle: 'expanded'
    },

    inlineCss: {
        applyStyleTags: false,
        removeStyleTags: false
    },

    htmlmin: {
        removeComments: true,
        collapseWhitespace: true
    },

    serve: {
        open: true,
        notify: false,
        startPath: dir.path,
        server: {
            baseDir: './',
            index: `${dir.dst}${dir.path}/`,
            routes: {
                [dir.path]: `${dir.dst}${dir.path}/`
            }
        }
    }
};


gulp.task('ejs', () => {
    return gulp.src([`./${dir.src}/**/*.ejs`, `!./${dir.src}/**/_*.ejs`])
        .pipe(plumber({
            errorHandler: notify.onError('<%= error.message %>')
        }))
        .pipe(ejs(options.ejs))
        .pipe(gulp.dest(`./${dir.dst}/`));
});

gulp.task('sass', () => {
    return gulp.src(`./${dir.src}/styles/**/*.{scss,sass}`)
        .pipe(plumber({
            errorHandler: notify.onError('<%= error.message %>')
        }))
        .pipe(sass(options.sass))
        .pipe(gulp.dest(`./${dir.dst}/styles/`));
});

gulp.task('inlineCss', () => {
    return gulp.src(`./${dir.dst}/**/*.html`)
        .pipe(plumber({
            errorHandler: notify.onError('<%= error.message %>')
        }))
        .pipe(inlineCss(options.inlineCss))
        .pipe(gulp.dest(`./${dir.dst}/`));
});

gulp.task('htmlmin', () => {
    return gulp.src(`./${dir.dst}/**/*.html`)
        .pipe(htmlmin(options.htmlmin))
        .pipe(gulp.dest(`./${dir.dst}/`));
});

gulp.task('serve', () => {
    browserSync(options.serve);
});

gulp.task('build', cb => {
    runSequence(
        'ejs',
        'sass',
        'inlineCss',
        'htmlmin',
        cb
    );
});

gulp.task('default', ['build', 'serve'], () => {
    gulp.watch(`./${dir.src}/**/*.ejs`, ['build', browserSync.reload]);
    gulp.watch(`./${dir.src}/styles/**/*.{scss,sass}`, ['build', browserSync.reload]);
});
package.json
{
  "private": true,
  "engines": {
    "node": "0.12.x"
  },
  "scripts": {
    "start": "gulp"
  },
  "devDependencies": {
    "babel-core": "^5.8.23",
    "browser-sync": "^2.8.2",
    "gulp": "^3.9.0",
    "gulp-ejs": "^1.2.0",
    "gulp-htmlmin": "^1.1.4",
    "gulp-inline-css": "^2.0.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.4",
    "run-sequence": "^1.1.2"
  }
}

Template stringsほんと便利。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away