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