前端自动构建工具 -- 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"
  }
}