1初始化

在前端根目录，可以使用命令生成配置文件模板：

  1. ➜  coolie init -c
  3.                                   oooo    o8o
  4.                                   `888    `"'
  5.   .ooooo.    .ooooo.    .ooooo.    888   oooo    .ooooo.
  6.  d88' `"Y8  d88' `88b  d88' `88b   888   `888   d88' `88b
  7.  888        888   888  888   888   888    888   888ooo888
  8.  888   .o8  888   888  888   888   888    888   888    .o
  9.  `Y8bod8P'  `Y8bod8P'  `Y8bod8P'  o888o  o888o  `Y8bod8P'    2.7.2
  11.  ━━━━━━━━━━━━━━━━━━━━━━━━  前端工程构建工具 ━━━━━━━━━━━━━━━━━━━━━━━━
  13.         git download  →  https://github.com/cooliejs/coolie-scaffold-self/archive/master.zip
  14.                unzip  →  /path/to/tempfile
  15.        scaffold self  →  /path/to/tempfile/coolie-scaffold-self-master
  16.         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.1.1
  10.  * @create 2015-12-31 11:18:08
  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: '../dest/',
  26.             // 目标根域
  27.             host: '',
  28.             // 版本号长度
  29.             versionLength: 32
  30.         },
  32.         // js 构建
  33.         js: {
  34.             // 入口模块，相对于当前文件
  35.             main: [
  36.                 './static/js/app/**/*.js'
  37.             ],
  38.             // coolie-config.js 路径，相对于当前文件
  39.             'coolie-config.js': './static/js/coolie-config.js',
  40.             // js 文件保存目录，相对于 dest.dirname
  41.             dest: './static/js/',
  42.             // 分块配置
  43.             chunk: [],
  44.             // js 压缩配置
  45.             minify: {
  46.                 global_defs: {
  47.                     DEBUG: true
  48.                 }
  49.             }
  50.         },
  52.         // html 构建
  53.         html: {
  54.             // html 文件，相对于当前文件
  55.             src: [
  56.                 './views/**/*.html'
  57.             ],
  58.             // html 压缩配置
  59.             minify: true
  60.         },
  62.         // css 构建
  63.         css: {
  64.             // css 文件保存目录，相对于 dest.dirname
  65.             dest: './static/css/',
  66.             // css 压缩配置
  67.             minify: true
  68.         },
  70.         // 资源
  71.         resource: {
  72.             // 资源保存目录，相对于 dest.dirname
  73.             dest: './static/res/',
  74.             // 是否压缩
  75.             minify: true
  76.         },
  78.         // 原样复制文件，相对于当前文件
  79.         copy: [
  80.             './favicon.ico',
  81.             './robots.txt'
  82.         ]
  83.     });
  85.     // 使用 coolie 中间件
  86.     // coolie.use(require('coolie-*'));
  88.     // 自定义 coolie 中间件
  89.     //coolie.use(function (options) {
  90.     //    // do sth.
  91.     //    return options;
  92.     //});
  93. };

下面逐一介绍下配置文件的各个配置项。

2clean boolean

布尔值，是否清空目标目录，默认为 true。

3dest object

构建的目标目录，生产目录相关配置。如：

  1. "dest": {}

3.1dest.dirname string

目标目录，生产目录。

  1. "dest": {
  2.   "dirname": "../webroot-pro"
  3. }

3.2dest.host string|function

绑定的网络地址，通常为分布到 CDN 环境的地址，

  1. "dest": {
  2.   "dirname": "../webroot-pro",
  3.   "host": "//cdn.domain.com/path/to/"
  4. }

也可以使用函数来动态指定

  1. {
  2.     "host": function(type, path) {
  3.         if (/\.(png|jpg|jpeg|gif|webp|bmp)$/i.test(path)) {
  4.             return 'http://img.cdn.com';
  5.         }
  7.         return {
  8.             css: 'http://css.cdn.com/',
  9.             js: 'http://js.cdn.com/',
  10.             res: 'http://res.cdn.com/'
  11.         }[type];
  12.     }
  13. }

3.3dest.versionLength number

版本号长度，默认为 32 位。

  1. "dest": {
  2.   "dirname": "../webroot-pro",
  3.   "host": "//cdn.domain.com/path/to/",
  4.   "versionLength": 8
  5. }

4js object

JS 文件构建的相关配置。如：

  1. "js": {}

4.1js.main string|array<string>

coolie.js 的前端模块化入口文件，支持 glob 通配符（下文提到的通配符与此相同），JS 压缩采用的是 uglify2。

glob部分语法

  • *：匹配任意数量的字符，但不匹配/
  • ?：匹配单个字符，但不匹配/
  • **：匹配任意数量的字符，包括/，只要它是路径中唯一的一部分
  • {}：允许使用一个逗号分割的列表或者表达式

  • !：排除匹配
    进阶阅读

  • 前端构建工具配置文档 - 图1npm: glob

  • 前端构建工具配置文档 - 图2npm: uglify-js
    如：
  1. "js": {
  2.     "main": [
  3.         "./static/js/app/**/*.js"
  4.     ]
  5. }

4.2js.coolie-config.js string|null

coolie.js 的配置文件（前端模块化加载器配置文件）的路径，因为构建操作需要改写配置文件。如：

  1. "js": {
  2.     "main": [
  3.         "./static/js/app/**/*.js"
  4.     ],
  5.     "coolie-config.js": "./static/js/coolie-config.js"
  6. }

js.coolie-config.js可以为空，当项目里没有使用到模块加载器时。

4.3js.dest string

非模块化脚本（指的是页面上使用script引用的脚本）的保存路径。

  1. <!--coolie-->
  2. <script src="1.js"></script>
  3. <script src="2.js"></script>
  4. <script src="3.js"></script>
  5. <!--/coolie-->

如上，3 个 JS 会被合并打包成一个文件（详细点这里）。如：

  1. "js": {
  2.     "main": [
  3.         "./static/js/app/**/*.js"
  4.     ],
  5.     "coolie-config.js": "./static/js/coolie-config.js",
  6.     "dest": "./static/js/"
  7. }

4.4js.chunk array

模块化分块地址列表，支持通配符。

进阶提示

  • 生成的 chunk 模块会默认放在chunk（会自动计算，如果chunk存在，则会生成chunk1目录，如果chunk1也存在，则会生成chunk2目录，以此类推）目录下。
  • 只有被指定的 chunk 模块才会进入 chunk 分析。
  • 只有被两个及以上的入口模块引用的 chunk 模块引用才会被抽离出来。
  • 模块分块策略。
  • 模块构建指导。

4.5js.minify object|boolean

JS 压缩采用的是 前端构建工具配置文档 - 图3uglify-js 模块，默认配置为：

  1. {
  2.     ie8: true,
  3.     compress: {
  4.         global_defs: {
  5.             DEBUG: false,
  6.             'process.env.NODE_ENV': 'production'
  7.         }
  8.     }
  9. }

构建配置会与 uglify-js 模块的默认配置进行合并，可以根据 uglify-js 模块文档进行深度配置，以达到业务需求。

5css object

CSS 文件的构建的相关配置。如：

  1. "css": {}

5.1css.dest string

css 文件的保存目录，相对于生产目录。

  1. "css": {
  2.     "dest": "./static/css/"
  3. }

5.2css.minify object/boolean

CSS 压缩采用的 前端构建工具配置文档 - 图4clean-css 模块，默认配置为：

  1. {
  2.     // 保留断行
  3.     keepBreaks: false,
  4.     // 保留特殊注释
  5.     // *: 全部注释
  6.     // 1: 头部注释
  7.     // 0: 无注释
  8.     keepSpecialComments: '0',
  9.     // 合并 media 查询
  10.     mediaMerging: true
  11. }

6html object

HTML 文件的构建的相关配置。

  1. "html": {}

6.1html.src string|array

html 文件的路径，支持通配符。这些 html 文件里的内容会被构建修改。

  1. "html": {
  2.     "src": "./views/**/*.html"
  3. }

6.2html.minify object|boolean

html 文件是否压缩，为了照顾到各种模板引擎，只删除了回车、注释，如果用了一些逗比的缩进模板引擎，那么需要设置为 false。

默认配置为：

  1. {
  2.     // 删除多行注释
  3.     removeHTMLMultipleLinesComments: true,
  4.     // 删除单行注释
  5.     removeHTMLOneLineComments: true,
  6.     // 合并连续空白
  7.     joinHTMLContinuousBlanks: true,
  8.     // 移除换行
  9.     removeHTMLBreakLines: true
  10. }

7resource

7.1resource.dest string

静态资源（在 HTML 文件里引用到的图片、ico 和在 CSS 文件里引用到的图片、字体等）的保存目录。如：

  1. "resource": {
  2.     "dest": "./static/res/"
  3. }

7.2resource.minify object|boolean

保留属性，即是否压缩静态资源。如：

  1. "resource": {
  2.     "dest": "./static/res/",
  3.     "minify": true
  4. }

8copy string|array<string>

需要原样复制的文件列表，支持通配符。如：

  1. "copy": [
  2.   "./favicon.ico",
  3.   "./path/to/"
  4. ]

9coolie.use

详细参考前端构建工具中间件文档。

10路径关系

相对于当前配置文件的路径有：

  • js.main
  • js[coolie-config.js]
  • html.src
  • copy

  • dest.dirname
    相对于构建之后目录（即dest.dirname）的有：

  • js.dest

  • css.dest
  • resource.dest

原文: https://coolie.ydr.me/document/coolie.config.js