1下载

使用 coolie demo 命令下载本 demo。

  1. ➜ coolie demo 6

2静态资源标签

以下方式引用的静态资源会被构建：

  • img、video、audio、embed 和 source 标签的 src 属性
  • link 标签的 href 属性
  • object 标签的 data 属性
  • source 标签的 srcset 属性
    不必构建的标签，添加coolieignore属性即可，如：
  1. <img src="./demo1.png">
  2. <img src="./demo1.png" coolieignore>

构建之后

  1. <img src="/static/res/xxxxoooo1.png">
  2. <img src="./demo1.png">

3外链的脚本、样式

4内联的脚本、样式

内联的脚本，指的是使用script标签包裹起来的脚本内容，也同样会被压缩处理。除非，该script指定了coolieignore属性，或者type属性值不是脚本。

js type 值有：

  • 空值
  • javascript
  • text/javascript
  • text/ecmascript
  • text/ecmascript-6
  • text/jsx
  • application/javascript
  • application/ecmascript
  1. <script>var abc = '这里的 script 会被构建处理';</script>
  2. <script coolieignore>var abc = '这里的 script 不会被构建处理';</script>

内联的样式，指的是使用style标签包裹起来的样式内容，也同样会被压缩处理、版本管理。除非，该style指定了coolieignore属性，或者type属性值不是样式。

5内嵌的样式

内嵌的样式，指的是标签里的style属性里的样式内容，也同样会被压缩处理、版本管理。

  1. <div style="background: url('./demo.png');"></div>
  2. <div style="background: url('/static/img/demo.png');"></div>

构建之后：

  1. <div style="background: url('/static/res/xxxxoooo1.png');"></div>
  2. <div style="background: url('/static/res/xxxxoooo2.png');"></div>

6预格式文本

pre、textarea，以及添加了coolieignore或不符合脚本、样式的script、style标签都会保留原始的文本格式。如：

  1. <pre>
  2. 预格式文本1
  3. </pre>
  5. <script type="text/plain">
  6. 预格式文本2
  7. </script>

构建之后，格式不会变化：

  1. <pre>
  2. 预格式文本1
  3. </pre><script type="text/plain">
  4. 预格式文本2
  5. </script>

需要压缩 template、script[type="template"]内容，使用 coolie-html-tag-template。

需要保护 html 中内嵌的 PHP 代码，使用 coolie-html-embed-php。

7注释

并不是所有的注释都会被删除的，具体参考以下几条：

7.1单行注释会被删除

  1. <!--会被删除-->

7.2非单行注释会被保留

  1. <!--
  2. 不会被删除
  3. -->

7.3开头为-的多行注释会被删除

  1. <!--
  2. - 会被删除
  3. -->

8demo

8.1初始化目录

新建coolie-demo6目录：

  1. coolie-demo6
  2. └── webroot-dev
  4. 1 directory, 0 files

8.2初始化文件

新建index.html文件：

  1. <!doctype html>
  2. <meta charset="utf-8">
  4. <style>
  5. body{
  6.     background: #eee;
  7. }
  8. </style>
  10. <img src="coolie.png">
  11. <h1>Hello coolie-demo6</h1>
  13. <script>
  14. window.onload = function() {
  15.     alert('Hello coolie6');
  16. };
  17. </script>

此时的目录结果为：

  1. .
  2. └── webroot-dev
  3.     ├── coolie.png
  4.     └── index.html
  6. 1 directory, 2 files

8.3构建前运行

使用 HTML 构建（demo6） - 图1sts 执行：

  1. ➜  cd src
  2. ➜  sts
  3.                  sts >> A static server is running.
  4.                 open >> http://172.22.252.118:57564

HTML 构建（demo6） - 图2

8.4前端构建配置

使用coolie init -c生成coolie.config.js（前端构建工具的配置文件）：

  1. ➜  coolie init -c
  3. ┌────────────────────────────────────┐
  4. │ coolie-cli                         │
  5. │ coolie@1.6.4                       │
  6. │ The front-end development builder. │
  7. └────────────────────────────────────┘
  8.         init success >> /coolie-demo3/webroot-dev/coolie.config.js

修改coolie.config.js为：

  1. /**
  2.  * ======================================================
  3.  * coolie-cli 配置文件 `coolie.config.js`
  4.  * 使用 `coolie init -c` 生成 `coolie.config.js` 文件模板
  5.  * 当前配置文件所在的目录为构建的根目录
  6.  *
  7.  * @link http://coolie.ydr.me/guide/coolie.config.js/
  8.  * @author ydr.me
  9.  * @version 1.6.4
  10.  * @create 2016-01-26 14:01:05
  11.  * =======================================================
  12.  */
  14. 'use strict';
  16. module.exports = function (coolie) {
  17.     // coolie 配置
  18.     coolie.config({
  19.         // 是否在构建之前清空目标目录
  20.         clean: true,
  22.         // 目标配置
  23.         dest: {
  24.             // 目标目录，相对于当前文件
  25.             dirname: '../webroot-pro/',
  26.             // 目标根域
  27.             host: '',
  28.             // 版本号长度
  29.             versionLength: 32
  30.         },
  32.         // js 构建
  33.         js: {
  34.             // 入口模块，相对于当前文件
  35.             main: [
  36.                 // 支持 glob 语法
  37.                 // './static/js/app/**/*.js'
  38.                 //【1】
  39.             ],
  40.             // coolie-config.js 路径，相对于当前文件
  41.             //【2】
  42.             'coolie-config.js': null,
  43.             // js 文件保存目录，相对于 dest.dirname
  44.             dest: './static/js/',
  45.             // 分块配置
  46.             chunk: []
  47.         },
  49.         // html 构建
  50.         html: {
  51.             // html 文件，相对于当前文件
  52.             src: [
  53.                 // 支持 glob 语法
  54.                 //【3】
  55.                 'index.html'
  56.             ],
  57.             // 是否压缩
  58.             minify: true
  59.         },
  61.         // css 构建
  62.         css: {
  63.             // css 文件保存目录，相对于 dest.dirname
  64.             dest: './static/css/',
  65.             // css 压缩配置
  66.             minify: {
  67.                 compatibility: 'ie7'
  68.             }
  69.         },
  71.         // 资源
  72.         resource: {
  73.             // 资源保存目录，相对于 dest.dirname
  74.             dest: './static/res/',
  75.             // 是否压缩
  76.             minify: true
  77.         },
  79.         // 原样复制文件，相对于当前文件
  80.         copy: [
  81.             // 支持 glob 语法
  82.             // './favicon.ico',
  83.             // './robots.txt'
  84.             //【4】
  85.         ]
  86.     });
  88.     // 使用 coolie 中间件
  89.     // coolie.use(require('coolie-*'));
  91.     // 自定义 coolie 中间件
  92.     //coolie.use(function (options) {
  93.     //    // do sth.
  94.     //    return options;
  95.     //});
  96. };

修改点：

  • 【1】：去掉了入口模块，此处没有用到模块化
  • 【2】：模块配置文件也没有，设置为 null
  • 【3】：修改需要构建的 html 文件路径
  • 【4】：去除了原样复制文件配置
    细心的同学可能发现了，配置文件基本没什么变化。

此时的目录结构为：

  1. .
  2. └── webroot-dev
  3.     ├── coolie.config.js
  4.     ├── coolie.png
  5.     └── index.html
  7. 1 directory, 3 files

8.5前端构建

  1. ➜  coolie build
  3. ┌────────────────────────────────────┐
  4. │ coolie-cli                         │
  5. │ coolie@1.6.4                       │
  6. │ The front-end development builder. │
  7. └────────────────────────────────────┘
  9.                  1/6 >> parse coolie config
  10.        coolie config >> /coolie-demo6/webroot-dev/coolie.config.js
  11.          src dirname >> /coolie-demo6/webroot-dev
  12.         dest dirname >> /coolie-demo6/webroot-pro/
  14.                  2/6 >> copy files
  15.           copy files >> no files are copied
  17.                  3/6 >> build main module
  18.            build app >> no main modules
  20.                  4/6 >> override coolie-config.js
  21.       overide config >> `coolie-config.js` is not defined
  23.                  5/6 >> build html
  24.                    √ >> /coolie.png
  25.                    √ >> /index.html
  27.                  6/6 >> generate a resource relationship map
  28.                    √ >> ../webroot-pro/coolie-map.json
  30.        build success >> past 147ms

构建之后的目录结构为：

  1. .
  2. ├── webroot-dev
  3. │   ├── coolie.config.js
  4. │   ├── coolie.png
  5. │   └── index.html
  6. └── webroot-pro
  7.     ├── coolie-map.json
  8.     ├── index.html
  9.     └── static
  10.         └── res
  11.             └── 7d9bbb425d679ca6c75f1cbbc66785fa.png
  13. 4 directories, 6 files

8.6构建后运行

  1. ➜  cd ../webroot-pro
  2. ➜  sts
  3.                  sts >> A static server is running.
  4.                 open >> http://172.22.252.118:57838

HTML 构建（demo6） - 图3

8.7构建结果分析

8.7.1index.html

表示index.html引用了一个资源文件coolie.png。

来看看index.html：

  1. <!doctype html><meta charset="utf-8"> <style>body{background:#eee}</style> <img src="/static/res/7d9bbb425d679ca6c75f1cbbc66785fa.png"><h1>Hello coolie-demo6</h1> <script>window.onload=function(){alert("Hello coolie6")};</script>
  2. <!--coolie build-->

明显可见，<style>、<script>标签里的内容都经过了压缩，并且也替换了<img>的src属性。

8.7.2img

图片被重名后放在static/res下。

9github

HTML 构建（demo6） - 图4github.com

原文: https://coolie.ydr.me/guide/build-html