使用 Gulp 加速 HTML 邮件开发

mailcheck dribbble@Eddie Lobanovskiy
如果说前端里最痛苦的事情是什么,那一定是用行内样式和 table 写响应式的 HTML 邮件了。

既然是痛点,那就解决它。

第一步,解决行内样式引用的问题

邮件内不能使用 <link> 来引入 CSS 样式,因此写邮件就十分痛苦。行内样式无法公用 CSS 而且写起来也很费劲,维护起来更痛苦。因此我们需要外链的样式。

通过 gulp-inline-css 这个插件可以很方便的将外链样式转化为行内样式。

这个插件很屌,不过仍然有坑。后面再说。

如果 HTML 也能复用

对于相同的部分例如头部和底部,当然是抽出模板来写更方便。邮件编写这么小的事情想当然用不上 swig jade 这种东西,Break a fly upon a wheel。

gulp-file-include 就是我们想要的东西,虽然是简单的 file inlcude,但是对于编写邮件已经足够了。

看起来已经够了,如果再加一些调料

再加上 stylus CSS 预处理器,本地文件服务器以及浏览器自动刷新(Livereload) …

Perfect,比起以前直接写静态好了太多。

inline-css 的一些坑

在开发过程中发现如果嵌入 <%= @user.username%> 这样的语句是编译后就成了 <%= @user.username=""%>,这样放到 Ruby erb 中显然无法运行。经过排除发现是 inline-css 这个包的问题。其实仔细思考这样的结果也在情理之中,<abc 本身就是 HTML 的标签形式。默认给属性加了空值其实也能理解,虽然 HTML5 推荐 disabled="disabled" 直接写成 disabled。那么如何解决呢?

写的时候写成 |% 最后全局搜索替换成 <% 不就好了。这是我最初的想法,确实挺 low 。这种事情就不应该手动去做,不如写个 Gulp 函数来处理这件事情。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function replaceStr(type) {
function transform(file, cb) {
if(type === 'replace') {
file.contents = new Buffer(String(file.contents).replace(/<%/g, '|%'));
} else {
file.contents = new Buffer(String(file.contents).replace(/\|%/g, '<%'));
}
cb(null, file);
}
return require('event-stream').map(transform);
}
// ...
.pipe(replaceStr('replace'))
.pipe(inlineCss({
applyStyleTags: false,
removeStyleTags: false
}))
.pipe(replaceStr('fix'))
// ...

并没有什么难度的一个功能,但确实方便了不少。

完整的DEMO github@liyaodong/gulp_mail_workflow

头图来自 dribbble@Eddie Lobanovskiy 侵删


I prefer my history dead. Dead history is writ in ink, the living sort in blood.