FED

©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0

coolie PK FIS

coolie PK FIS，以小见大，从 fis 官网的一个例子开始。

FIS

http://fis.baidu.com/

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

为了尝试更多 FIS3 提供的特性，我们设计一个比较复杂的例子。这个例子包含

  • 两个页面
  • 三个 css 文件，其中俩页面各一个 css 文件，剩下一个 css 文件公用
  • 包含一个 less 文件，并被俩页面同时使用
  • 两个 png 图片
  • 两个 js 文件
  • 例子下载地址 demo-lv1

根据文档指示，尝试构建，需要安装以下模块：

npm install -g fis3
npm install -g fis-parser-less
npm install -g fis3-postpackager-loader

对刚入手的人来说，fis 和 fis3 傻傻分不清楚。

继续按照文档：

fis3 release

 [INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)

 Ω
 [ERROR] unreleasable file [/path/to/demo-lv1/static/common.css] in [/about.html]
    • 恕我直言，看不明白，这说的是什么。没有继续了。

coolie

http://coolie.ydr.me/

coolie —— 可能是最好的前端开发构建工具。

  • JS 文件的分析、合并、压缩、版本管理
  • CSS 文件的分析、合并、压缩、版本管理
  • HTML 文件分析、压缩、版本管理
  • 入口模块的分析、分块、合并、压缩、版本管理
  • 静态资源的分析、压缩、版本管理

还是上面 fis 的例子。coolie 是构建工具，不是预编译工具，预编译有专门的工具来做的更好，在 webstorm 里添加一个监听编译即可，没什么可说。

安装

为了跑起来这个例子。我们需要

npm install -g coolie

配置

安装最新的 coolie 来进行构建。然后新建一个构建配置文件：

➜  demo-lv1 coolie json

   ╔═════════════════════════════════════════╗
   ║   coolie@0.21.11                        ║
   ║   The front-end development builder.    ║
   ╚═════════════════════════════════════════╝

                tips => 以下操作留空回车表示同意默认配置。

           file path => /path/to/demo-lv1/coolie.json
             warning => 如果上述目录不正确，请按`ctrl+C`退出后重新指定。
                 1/7 => 请输入 JS 入口模块的路径。
                        支持通配符，多个路径使用空格分开，默认为“./static/js/app/**/*.js”。

                 2/7 => 请输入 coolie.js 配置文件所在的路径，默认为“./static/js/coolie-config.js”。

                 3/7 => 请输入合并压缩后的非模块化 JS 文件的保存目录。默认为“./static/js/”。
                        不建议与 JS 入口模块的目录一样

                 4/7 => 请输入合并压缩后的 CSS 文件的保存目录。默认为“./static/css/”。

                 5/7 => 请输入 HTML 文件所在的路径。
                        支持通配符，多个路径使用空格分开。默认为“./views/**/*.html”。
./*.html
                 6/7 => 请输入构建之后的静态资源（如：图片、字体）的目录，默认为“./static/res/”。

                 7/7 => 请输入构建的目标目录，默认为“../dest/”。
../demo-lv1-dest
             confirm => 文件内容为：
         coolie.json => {
                          "js": {
                            "main": [
                              "./static/js/app/**/*.js"
                            ],
                            "coolie-config.js": "./static/js/coolie-config.js",
                            "dest": "./static/js/",
                            "chunk": []
                          },
                          "css": {
                            "dest": "./static/css/",
                            "minify": {
                              "compatibility": "ie7"
                            }
                          },
                          "html": {
                            "src": [
                              "./*.html"
                            ],
                            "minify": true
                          },
                          "resource": {
                            "dest": "./static/res/",
                            "minify": true
                          },
                          "copy": [],
                          "dest": {
                            "dirname": "../demo-lv1-dest",
                            "host": ""
                          }
                        }
             confirm => 确认文件内容正确并生成文件？（[y]/n）
y
                  √  => /path/to/demo-lv1/coolie.json

因为 coolie 是一个比较通用化的前端构建工具，所以包含了 js、css、html和静态资源四个方面的构建，基本囊括了前端开发需要构建的所有内容。并且，这是配置是静态的，一经初始化无须再次修改。

本例子不需要构建模块脚本，因此这里修改 coolie.json 配置文件为：

{
  "js": {
    "dest": "./static/js/"
  },
  "css": {
    "dest": "./static/css/",
    "minify": {
      "compatibility": "ie7"
    }
  },
  "html": {
    "src": [
      "./*.html"
    ],
    "minify": true
  },
  "resource": {
    "dest": "./static/res/",
    "minify": true
  },
  "copy": [],
  "dest": {
    "dirname": "demo-lv1-dest",
    "host": ""
  }
}

编译

编译 less 到 css，即 test.less => test.css

p span{
    color: #bebd7f;
}

标记

为了更好的构建，我们需要修改 index.html和about.html。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>FIS3 demo</title>
  <!-- coolie -->
  <link rel="stylesheet" type="text/css" href="./static/common.css">
  <link rel="stylesheet" type="text/css" href="./static/index.css">
  <link rel="stylesheet" type="text/css" href="./static/test.css">
  <!-- /coolie -->
</head>
<body>
  <p>
    Page Index<span>~</span>
  </p>

  <!-- coolie -->
  <script type="text/javascript" src="./static/index.js"></script>
  <!-- /coolie -->
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
  <title>FIS3 demo</title>
  <!-- coolie -->
  <link rel="stylesheet" type="text/css" href="./static/common.css">
  <link rel="stylesheet" type="text/css" href="./static/about.css">
  <link rel="stylesheet" type="text/css" href="./static/test.css">
  <!-- /coolie -->
</head>
<body>
  <p>
    Page About<span>~</span>
  </p>

  <!-- coolie -->
  <script type="text/javascript" src="./static/about.js"></script>
  <!-- /coolie -->
  
</body>
</html>

构建

➜  demo-lv1  coolie build

   ╔═════════════════════════════════════════╗
   ║   coolie@0.21.11                        ║
   ║   The front-end development builder.    ║
   ╚═════════════════════════════════════════╝


                 1/5 => copy files

                 2/5 => build main
                  ×  => NO coolie.js files
                  ×  => unchunk modules

                 3/5 => overwrite config

                 4/5 => build html css
                  √  => /path/to/demo-lv1/demo-lv1-dest/static/css/dc0a7f2e7cec2dad9d6ea61462932906.css
                  √  => /path/to/demo-lv1/demo-lv1-dest/static/js/893fc2d335de115ab7a73166b1c1cd05.js
                  √  => /path/to/demo-lv1/demo-lv1-dest/static/css/2ab0adfe8d13cae78148b53c242acc99.css
                  √  => /path/to/demo-lv1/demo-lv1-dest/static/js/f57f824240042576194e42971acba703.js
                  √  => /path/to/demo-lv1/*.html

                 5/5 => generator relationship map
                  √  => /path/to/demo-lv1-dest/relationship-map.json

       build success => copy 0 file(s),
                        build 0 main file(s),
                        build 2 js file(s),
                        build 2 html file(s),
                        build 6 css file(s),
                        build 0 resource file(s),
                        past 112 ms

结果

index.html

为了更好的阅读，这里做了折行处理

<!DOCTYPE html><html><head> <title>FIS3 demo</title> 

<link rel="stylesheet" href="/static/css/2ab0adfe8d13cae78148b53c242acc99.css">

</head><body> <p> Page Index<span>~</span> </p> 

<script src="/static/js/f57f824240042576194e42971acba703.js"></script>

</body></html>
<!--coolie@0.21.11-->

about.html

<!DOCTYPE html><html><head> <title>FIS3 demo</title> 

<link rel="stylesheet" href="/static/css/dc0a7f2e7cec2dad9d6ea61462932906.css">

</head><body> <p> Page About<span>~</span> </p> 

<script src="/static/js/893fc2d335de115ab7a73166b1c1cd05.js"></script>

</body></html>
<!--coolie@0.21.11-->

更多

coolie 与 fis 的有相同点，也有不同点，coolie 与 fis 之间的比较在一个相对合理相同的范围进行，如有疑问欢迎及时斧正。

[附录 div.io 上的群聊记录]](http://div.io/topic/1181)