前端自动构建工具 -- fis
为什么需要构建工具
在日常开发过程中，会经常遇到以下两个问题
- 更新的代码在用户的浏览器上不能及时清除缓存怎么办啊
- 压缩代码总得一个一个处理好麻烦
这个时候构建工具就派上用场了，构建工具除了能快速解决以上问题外，还能有效解决以下问题
- 性能优化
- 资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）
- 模块化开发
- 自动化工具
- 开发规范
- 代码部署
为什么是 fis
知道为什么需要构建工具后，我们先来看一下构建工具有哪些
逝者如 grunt，来者有 gulp，还有如日中天的 webpack，但这里为什么偏偏讲 fis 呢？
因为易上手啊！！
为了急于解决上面遇到的两个问题，fis 易上手易配置的特点很是诱人，所以这里也是现学现卖了。
（这里讲的 fis 为最新版本，即 fis3）
fis 能做什么
官方文档说的很详细了，这里不一一赘述，主要讲一些常用的功能把。
先说这个工具是怎么解决前面提到的两个常见问题的
1. 及时更新文件，清除浏览器缓存
为了能及时清除缓存，修改文件名是一种比较好的方法，可以加上版本号或时间戳，这里 fis 的做法是给每个文件加上 MD5 值
// 配置文件 fis-config.js
fis.match('*.{js,css,png}', { // 匹配文件后缀为 js css png 的文件
useHash: true
});
// 执行工作指令
fis release -d ../output // 表示将目标文件处理后放在 output 文件夹中这里用到的 match 表示匹配全部符合规则的文件，也就是说能通过 match 实现对文件的批处理，所以下能顺利解决下面的问题。
2. 自动压缩代码
// 配置文件 fis-config.js
fis.match('*.js', { // 压缩 js 文件
// fis-optimizer-uglify-js 插件进行压缩，已内置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', { // 压缩 css 文件
// fis-optimizer-clean-css 插件进行压缩，已内置
optimizer: fis.plugin('clean-css')
});
// 执行工作指令
fis release -d ../output // 表示将目标文件处理后放在 output 文件夹中这里就是利用 match 实现对目标文件进行压缩，这里压缩了 js 和 css 文件，采用的执行是 uglify-js 和 clean-css，这两个插件是 fis 自带的，不需要单独安装
如果我想压缩 html 文件里的 js 或 css 代码怎么处理呢？
也能处理，fis 轻轻松松帮你实现
fis.match('*.html:js', { // 冒号: 表示压缩 html 文件里的 js 代码
optimizer: fis.plugin('uglify-js')
});
// 结合压缩 js 文件的配置，可以采用花括号 {} 匹配多个规则，可以写成如下
fis.match('*.{js, html:js}', { // 冒号: 表示压缩 html 文件里的 js 代码
optimizer: fis.plugin('uglify-js')
});引申出来的问题
这里有另外一个问题，就是每次构建，都会生成新的文件，但不会删除原来的文件，这样就造成了冗余，浪费硬盘内存资源，所以应该如何删除原来的文件呢？
本人并没有找到 fis 的删除功能，这里巧妙地结合了 npm，执行文件删除指令和 fis 指令进行构建
// package.json 文件
{
"scripts": {
"build": "rm -rf ../static && fis3 release -d ../static",
"start": "fis3 server start"
}
}