coolie 好不好用，先从 hello world 开始。

1下载

使用 coolie demo 命令下载本 demo。

  1. ➜ coolie demo 1

2准备

先准备以下目录

  1. .
  2. ├── webroot-dev
  3. └── webroot-pro
  5. 2 directories, 0 files
  • webroot-dev：构建之前的项目根目录（开发目录，后面的 demo 与之相同）
  • webroot-pro：构建之后的项目根目录（生产目录，后面的 demo 与之相同）
    接下来，我们就在webroot-dev目录下开始写代码了。

3页面文件

将index.html文件内容填写如下：

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <h1>Hello World</h1>

4前端构建前运行

coolie-cli 相比其他的构建工具，侵入性非常的低，未构建之前是可以正常运行的。

当前的目录结构为：

  1. .
  2. ├── webroot-dev
  3. │   └── index.html
  4. └── webroot-pro
  6. 2 directories, 1 file

使用 Hello World（demo1） - 图1sts 工具（sts 是一款运行静态服务器的 node 工具），在src目录下运行：

  1. ➜  sts
  2.                  sts >> A static server is running.
  3.                 open >> http://172.22.255.75:62290

会使用默认浏览器打开index.html。

Hello World（demo1） - 图2

5前端构建配置文件

看到配置文件先不要紧张，coolie-cli 的配置非常的简单：

  • 用过的都说好，配置简化到最小，即使不看文档也知道
  • 一次性配置终生受用，不像其他构建工具开发一点配置一点
  • 可以使用命令生成标准（推荐的）配置文件，只需要稍加修改即可
    使用coolie init -c命令生成文件模板:
  1. ➜  cd webroot-dev
  2. ➜  coolie init -c
  4.                                   oooo    o8o
  5.                                   `888    `"'
  6.   .ooooo.    .ooooo.    .ooooo.    888   oooo    .ooooo.
  7.  d88' `"Y8  d88' `88b  d88' `88b   888   `888   d88' `88b
  8.  888        888   888  888   888   888    888   888ooo888
  9.  888   .o8  888   888  888   888   888    888   888    .o
  10.  `Y8bod8P'  `Y8bod8P'  `Y8bod8P'  o888o  o888o  `Y8bod8P'    2.7.2
  12.  ━━━━━━━━━━━━━━━━━━━━━━━━  前端工程构建工具 ━━━━━━━━━━━━━━━━━━━━━━━━
  14.         git download  →  https://github.com/cooliejs/coolie-scaffold-self/archive/master.zip
  15.                unzip  →  /path/to/tempfile
  16.        scaffold self  →  /path/to/tempfile/coolie-scaffold-self-master
  17.         init success  →

可以简单的看看这个文件，然后修改为：

  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-25 20:27:23
  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.                 //【1】
  38.             ],
  39.             // coolie-config.js 路径，相对于当前文件
  40.             //【2】
  41.             'coolie-config.js': null,
  42.             // js 文件保存目录，相对于 dest.dirname
  43.             dest: './static/js/',
  44.             // 分块配置
  45.             chunk: []
  46.         },
  48.         // html 构建
  49.         html: {
  50.             // html 文件，相对于当前文件
  51.             src: [
  52.                 // 支持 glob 语法
  53.                 //【3】
  54.                 './views/index.html'
  55.             ],
  56.             // 是否压缩
  57.             minify: true
  58.         },
  60.         // css 构建
  61.         css: {
  62.             // css 文件保存目录，相对于 dest.dirname
  63.             dest: './static/css/',
  64.             // css 压缩配置
  65.             minify: {
  66.                 compatibility: 'ie7'
  67.             }
  68.         },
  70.         // 资源
  71.         resource: {
  72.             // 资源保存目录，相对于 dest.dirname
  73.             dest: './static/res/',
  74.             // 是否压缩
  75.             minify: true
  76.         },
  78.         // 原样复制文件，相对于当前文件
  79.         copy: [
  80.             // 支持 glob 语法
  81.             //【4】
  82.         ]
  83.     });
  85.     // 使用 coolie 中间件
  86.     // coolie.use(require('coolie-*'));
  88.     // 自定义 coolie 中间件
  89.     //coolie.use(function (options) {
  90.     //    // do sth.
  91.     //    return options;
  92.     //});
  93. };
  • 【1】入口模块文件留空，没有任何 JS 文件
  • 【2】模块加载器配置文件留空，没有用到任何模块加载器
  • 【3】需要构建的 html 文件
  • 【4】需要复制的文件留空，没有任何文件需要复制

6前端构建

我们来尝试在webroot-dev目录下执行前端构建，看看会发生什么。

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

啊，喂，看着屏幕上的日志刷刷而过，别眨眼，来看看构建之后的目录结构：

  1. .
  2. ├── webroot-dev
  3. │   ├── coolie.config.js
  4. │   └── index.html
  5. └── webroot-pro
  6.     ├── coolie-map.json
  7.     └── index.html
  9. 2 directories, 4 files

从目录结构可以看到，构建之后的文件仍有index.html，但却多了一个coolie-map.json

7前端构建后运行

先切换到构建之后的目录，来看看构建之后的运行结果吧：

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

Hello World（demo1） - 图3

可喜可贺，运行结果一模一样。

8前端构建后分析

仔细对比下构建前后的目录结果，基本是相同的，不同的是：

  • 构建之前有coolie.config.js，构建之后没有了
  • 构建之后由coolie-map.json，构建之前并没有
    来看看coolie-map.json：
  1. {
  2.   "/index.html": {
  3.     "main": [],
  4.     "async": [],
  5.     "js": [],
  6.     "css": [],
  7.     "res": []
  8.   }
  9. }

coolie-map.json是资源地图信息，标记了每个页面依赖了哪些资源，详细分析点这里。

我们再来看看index.html：

  1. <!DOCTYPE html><meta charset="utf-8"><h1>Hello World</h1>
  2. <!--coolie build-->

很明显，index.html已经被压缩了，并且打上了 coolie 的标记。

到这里，一个完整的 hello world 已经完成了。其实前端构建就这么简单，一个配置一个命令就可以完成了。

感兴趣的话，继续往下看吧。

9github

Hello World（demo1） - 图4github.com

原文: https://coolie.ydr.me/guide/hello-world