晓风博客

一片荒芜的地方

使用 Gulp 加速 HTML 邮件开发

![]() 如果说前端里最痛苦的事情是什么,那一定是用行内样式和 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
22
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.