1介绍

任何一切工具，只要推广给更多的人使用，就难免会有更多私人定制和个性化需求。coolie-cli 也一直在努力，即使 coolie-cli 就已经是通用级别的构建工具了。

coolie-cli 中间件服务于不同的阶段，如构建 html 之前，构建 html 之后，等等。

2示例

需要将<div data-src="image.png"></div>构建成<img src="xxxxx.png">。这是一个非常个性化的需求了，不属于通用级别，这个时候就可以使用 coolie 中间件来完成。

我们在构建 html 之后，再处理下 html 文件：

  1. coolie.use(function () {
  2.     return function (options) {
  3.         // 如果当前构建进度不是在 html 之后，则取消操作
  4.         if( options.progress !== 'post-html' ) {
  5.             return options;
  6.         }
  8.         // 找到有 data-src 属性的 div
  9.         options.code = coolie.matchHTML(options.code, {
  10.             tag: 'div',
  11.             attrs: {
  12.                 'data-src': /.*/
  13.             }
  14.         }, function (node){
  15.             // 构建资源模块，返回构建之后的 url
  16.             var url = coolie.buildResPath(node.attrs['data-src'], options.file);
  18.             // 修改为 img 标签
  19.             node.tag = 'img';
  21.             // 添加 src 属性
  22.             node.attrs.src = url;
  24.             // 设置为非闭合标签
  25.             node.closed = false;
  27.             // 取消 data-src 属性
  28.             node.attrs['data-src'] = false;
  30.             // 返回节点信息
  31.             return node;
  32.         });
  34.         return options;
  35.     };
  36. });

3官方中间件

4文档

原文: https://coolie.ydr.me/introduction/coolie-middleware