html邮件模板编写实践

编写邮件模板

最近在写业务开发的时候，需要去写邮件通知的模板。 积累了一些邮箱编写经验呀呀。

邮件html编写要求

邮件编写参照的是 阮一峰大神的HTML Email 编写指南

里面大致提了

使用table 布局 外链除了图片全部失效 css使用行内样式为佳

各邮件对css的支持

实验

行内样式写起来很痛苦，所以，一开始我打算写的是<style></style>标签。 写完后，我向各个主邮箱发送了测试

gmail.com 163.com qq.com tencent.com

结果如图 图上可见，QQ、tencent、163对<style>的支持尚可，但是gmail已经完全把<style>过滤掉了。

所以需要改用 行内样式 做实验

可以看到，样式完全支持了

如何写行内样式

如果让自己手动写行内样式，那么就是太痛苦了。 那么，有没有办法自动将自己的样式转成行内样式呢？

一开始，我的想法是，使用js遍历所有dom，获取css值，然后写在dom的style属性里。 可是这个办法我探索了一晚上，没有找到一个函数，只获取css声明过的样式，只能获得所有样式的值。

后台直接google了一下gulp-inline，结果搜索出一个gulp-inline-css插件，可以将css转成 inline-css，即行内样式， 用法如下

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));
});

完美。

顺便提一下，gmail不支持 position样式，我发现各个邮箱，就gmail的限制比较多。

结尾

有了合适的插件，编写邮件就方便多了。