JS 基本构建（demo2）

1下载
2demo
3github

1下载

使用 coolie demo 命令下载本 demo。

➜ coolie demo 2

2demo

2.1初始化目录

新建一个coolie-demo2目录：

coolie-demo2
└── webroot-dev

1 directories, 0 files

2.2初始化文件

2.2.1index.html

<!doctype html>
<meta charset="utf-8">

<script src="coolie-demo2.js"></script>

2.2.2coolie-demo2.js

window.onload = function() {
    alert('coolie demo2');
};

此时的目录结构为：

.
└── webroot-dev
    ├── coolie-demo2.js
    └── index.html

1 directories, 2 files

2.3构建前运行

使用 sts 执行：

➜  cd webroot-dev
➜  sts
                 sts >> A static server is running.
                open >> http://192.168.0.157:55119

2.4前端构建配置

在构建之前，依然需要配置，通过之前的 hello world 一节，想必你对 coolie 的配置也有一定的了解了。再来复习一次。

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

➜  coolie init -c


                                  oooo    o8o
                                  `888    `"'
  .ooooo.    .ooooo.    .ooooo.    888   oooo    .ooooo.
 d88' `"Y8  d88' `88b  d88' `88b   888   `888   d88' `88b
 888        888   888  888   888   888    888   888ooo888
 888   .o8  888   888  888   888   888    888   888    .o
 `Y8bod8P'  `Y8bod8P'  `Y8bod8P'  o888o  o888o  `Y8bod8P'    2.7.2

 ━━━━━━━━━━━━━━━━━━━━━━━━  前端工程构建工具 ━━━━━━━━━━━━━━━━━━━━━━━━

        git download  →  https://github.com/cooliejs/coolie-scaffold-self/archive/master.zip
               unzip  →  /path/to/tempfile
       scaffold self  →  /path/to/tempfile/coolie-scaffold-self-master
        init success  →

修改coolie.config.js为：

/**
 * ======================================================
 * coolie-cli 配置文件 `coolie.config.js`
 * 使用 `coolie init -c` 生成 `coolie.config.js` 文件模板
 * 当前配置文件所在的目录为构建的根目录
 *
 * @link http://coolie.ydr.me/guide/coolie.config.js/
 * @author ydr.me
 * @version 1.6.4
 * @create 2016-01-26 10:06:22
 * =======================================================
 */

'use strict';

module.exports = function (coolie) {
    // coolie 配置
    coolie.config({
        // 是否在构建之前清空目标目录
        clean: true,

        // 目标配置
        dest: {
            // 目标目录，相对于当前文件
            dirname: '../webroot-pro/',
            // 目标根域
            host: '',
            // 版本号长度
            versionLength: 32
        },

        // js 构建
        js: {
            // 入口模块，相对于当前文件
            main: [
                // 支持 glob 语法
                //【1】
            ],
            // coolie-config.js 路径，相对于当前文件
            //【2】
            'coolie-config.js': null,
            // js 文件保存目录，相对于 dest.dirname
            dest: './static/js/',
            // 分块配置
            chunk: []
        },

        // html 构建
        html: {
            // html 文件，相对于当前文件
            src: [
                // 支持 glob 语法
                //【3】
                'index.html'
            ],
            // 是否压缩
            minify: true
        },

        // css 构建
        css: {
            // css 文件保存目录，相对于 dest.dirname
            dest: './static/css/',
            // css 压缩配置
            minify: {
                compatibility: 'ie7'
            }
        },

        // 资源
        resource: {
            // 资源保存目录，相对于 dest.dirname
            dest: './static/res/',
            // 是否压缩
            minify: true
        },

        // 原样复制文件，相对于当前文件
        copy: [
            // 支持 glob 语法
            // './favicon.ico',
            // './robots.txt'
            //【4】
        ]
    });

    // 使用 coolie 中间件
    // coolie.use(require('coolie-*'));

    // 自定义 coolie 中间件
    //coolie.use(function (options) {
    //    // do sth.
    //    return options;
    //});
};

修改点：

【1】：去掉了入口模块，此处没有用到模块化
【2】：模块配置文件也没有，设置为 null
【3】：修改需要构建的 html 文件路径
【4】：去除了原样复制文件配置

此时的目录结构为：

.
└── webroot-dev
    ├── coolie-demo2.js
    ├── coolie.config.js
    └── index.html

1 directory, 3 files

2.5前端构建

执行构建：

➜  cd webroot-dev
➜  coolie build


┌────────────────────────────────────┐
│ coolie-cli                         │
│ coolie@1.6.4                       │
│ The front-end development builder. │
└────────────────────────────────────┘

                 1/6 >> parse coolie config
       coolie config >> /coolie-demo2/webroot-dev/coolie.config.js
         src dirname >> /coolie-demo2/webroot-dev
        dest dirname >> /coolie-demo2/webroot-pro/

                 2/6 >> copy files
          copy files >> no files are copied

                 3/6 >> build main module
           build app >> no main modules

                 4/6 >> override coolie-config.js
      overide config >> `coolie-config.js` is not defined

                 5/6 >> build html
                   √ >> /coolie-demo2.js
                   √ >> /index.html

                 6/6 >> generate a resource relationship map
                   √ >> ../webroot-pro/coolie-map.json

       build success >> past 132ms

构建之后的目录结构为：

.
├── webroot-dev
│   ├── coolie-demo2.js
│   ├── coolie.config.js
│   └── index.html
└── webroot-pro
    ├── coolie-map.json
    ├── index.html
    └── static
        └── js
            └── b421893239552ab5531042432f4f2bcb.js

4 directories, 6 files

2.6构建后运行

切换到webroot-pro目录再次执行：

➜  cd ../webroot-pro
➜  sts
                 sts >> A static server is running.
                open >> http://192.168.0.157:55513

成功运行，下面来分析下构建之后的结果吧。

2.7分析构建结果

2.7.1index.html

先来看看构建之后的 html 文件：

<!doctype html><meta charset="utf-8"> <script src="/static/js/b421893239552ab5531042432f4f2bcb.js"></script>
<!--coolie build-->

script 路径由原来的 coolie-demo2.js 变为 /static/js/b421893239552ab5531042432f4f2bcb.js
html 的内容被压缩了

2.7.2js 文件

js 文件的文件名被修改了（为什么要这么做？）

window.onload=function(){alert("coolie demo2")};

可见，js 的内容也经过了压缩。

3github

github.com