각 메일러의 CSS 대응 상황

표시 확인은 litmus.com을 활용

코딩 포인트

Gulp 작업

import gulp from 'gulp';
import plumber from 'gulp-plumber';
import stylus from 'gulp-stylus';
import pug from 'gulp-pug';
import inlineCss from 'gulp-inline-css';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';
import rename from 'gulp-rename';
import autoprefixer from "autoprefixer";
import postcss from "gulp-postcss";
import paths from '../config';

gulp.task('server', () => {
    browserSync({
        server: {
            baseDir: paths.dist_dir,
        },
        open: 'external',
        online: true
    })
});

gulp.task('pug', () => {
    return gulp.src(paths.pug_src)
    .pipe(plumber())
    .pipe(pug({
        pretty: true
    }))
    .pipe(gulp.dest(paths.pug_dist));
});

gulp.task('stylus', () => {
    return gulp.src(paths.stylus_src)
    .pipe(plumber())
    .pipe(stylus({
            'include css': true
        }
    ))
    .pipe(postcss([
        autoprefixer({
            remove: false,
            "browsers": ["last 4 versions"]
        })
    ]))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(rename({
        basename: 'style',
    }))
    .pipe(gulp.dest(paths.pug_dist));
});

gulp.task('inlineCss', () => {
    return gulp.src(paths.html_src)
    .pipe(plumber())
    .pipe(inlineCss())
    .pipe(gulp.dest(paths.html_dist))
    .pipe(browserSync.stream());
});

gulp.task('htmlMailBuild', () => {
    runSequence(['pug', 'stylus', 'inlineCss']);
});

gulp.task('default', ['htmlMailBuild', 'server'], () => {
    gulp.watch(paths.pug_src, ['htmlMailBuild']);
    gulp.watch(paths.stylus_src, ['htmlMailBuild']);
    gulp.watch(paths.img, ['imagecopy']);
});