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