如果说前端里最痛苦的事情是什么，那一定是用行内样式和 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 侵删