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 之间的比较在一个相对合理相同的范围进行，如有疑问欢迎及时斧正。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 前端代码规范笔记
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论