1下载

使用 coolie demo 命令下载本 demo。

  1. ➜ coolie demo 2

2demo

2.1初始化目录

新建一个coolie-demo2目录：

  1. coolie-demo2
  2. └── webroot-dev
  4. 1 directories, 0 files

2.2初始化文件

2.2.1index.html

  1. <!doctype html>
  2. <meta charset="utf-8">
  4. <script src="coolie-demo2.js"></script>

2.2.2coolie-demo2.js

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

此时的目录结构为：

  1. .
  2. └── webroot-dev
  3.     ├── coolie-demo2.js
  4.     └── index.html
  6. 1 directories, 2 files

2.3构建前运行

使用 JS 基本构建（demo2） - 图1sts 执行：

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

JS 基本构建（demo2） - 图2

2.4前端构建配置

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

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

  1. ➜  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  →

修改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 10:06:22
  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.                 '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.             // './favicon.ico',
  82.             // './robots.txt'
  83.             //【4】
  84.         ]
  85.     });
  87.     // 使用 coolie 中间件
  88.     // coolie.use(require('coolie-*'));
  90.     // 自定义 coolie 中间件
  91.     //coolie.use(function (options) {
  92.     //    // do sth.
  93.     //    return options;
  94.     //});
  95. };

修改点：

  • 【1】：去掉了入口模块，此处没有用到模块化
  • 【2】：模块配置文件也没有，设置为 null
  • 【3】：修改需要构建的 html 文件路径
  • 【4】：去除了原样复制文件配置
    此时的目录结构为：
  1. .
  2. └── webroot-dev
  3.     ├── coolie-demo2.js
  4.     ├── coolie.config.js
  5.     └── index.html
  7. 1 directory, 3 files

2.5前端构建

执行构建：

  1. ➜  cd webroot-dev
  2. ➜  coolie build
  5. ┌────────────────────────────────────┐
  6. │ coolie-cli                         │
  7. │ coolie@1.6.4                       │
  8. │ The front-end development builder. │
  9. └────────────────────────────────────┘
  11.                  1/6 >> parse coolie config
  12.        coolie config >> /coolie-demo2/webroot-dev/coolie.config.js
  13.          src dirname >> /coolie-demo2/webroot-dev
  14.         dest dirname >> /coolie-demo2/webroot-pro/
  16.                  2/6 >> copy files
  17.           copy files >> no files are copied
  19.                  3/6 >> build main module
  20.            build app >> no main modules
  22.                  4/6 >> override coolie-config.js
  23.       overide config >> `coolie-config.js` is not defined
  25.                  5/6 >> build html
  26.                    √ >> /coolie-demo2.js
  27.                    √ >> /index.html
  29.                  6/6 >> generate a resource relationship map
  30.                    √ >> ../webroot-pro/coolie-map.json
  32.        build success >> past 132ms

构建之后的目录结构为：

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

2.6构建后运行

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

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

JS 基本构建（demo2） - 图3

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

2.7分析构建结果

2.7.1index.html

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

  1. <!doctype html><meta charset="utf-8"> <script src="/static/js/b421893239552ab5531042432f4f2bcb.js"></script>
  2. <!--coolie build-->
  • script 路径由原来的 coolie-demo2.js 变为 /static/js/b421893239552ab5531042432f4f2bcb.js
  • html 的内容被压缩了

2.7.2js 文件

js 文件的文件名被修改了（JS 基本构建（demo2） - 图4为什么要这么做？）

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

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

3github

JS 基本构建（demo2） - 图5github.com

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