FIS
fis 最新版本是 3.x，在 16 年左右非常流行，但是目前已经停止更新维护了。
学习 fis 的目的不是为了使用它，而是为了了解它的设计思想。
相比较于 grunt 和 gulp，fis 属于另一类构建系统。fis 的特点是高度集成，将前端日常开发中经常用到的构建任务和调试任务都集成到了内部，非常容易上手。
如果你的需求不高，甚至可以不需要定义任务，而是直接使用 fis 内部的任务。
基本使用
首先安装 fis，fis 的最新模块叫做 fis3，因为这个版本和之前的版本有很大的变化，所以特意起名 fis3。
npm i -D fis3
创建 src 目录，并在该目录下创建 3 个文件用于测试。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>fis3 demo</title> <link rel="stylesheet" href="./style.scss" /> </head> <body> hello,fis3! <script src="./app.js"></script> </body> </html>
app.js
(() => { console.log("welcome fis3"); })();
style.scss
$bg: rgb(245, 219, 245); $color: #982d2d; body { background-color: color; } body { background-color: color; }
fis 最常用的一个命令就是 release，-d 的意思是指定输出目录。
npx fis3 release -d output
这样就会在项目的根目录下生成一个 output 文件夹，里面存放了所有的文件。
但是 es6 语法和 scss 并没有编译，唯一发生变化的就是 html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>fis3 demo</title> <link rel="stylesheet" href="/src/style.scss" /> </head> <body> hello,fis3! <script src="/src/app.js"></script> </body> </html>
里面的路径全部会被转换为绝对路径，这就是资源定位问题。
在之前的项目开发中，前端项目开发时所使用的相对路径在上线部署时可能并不适用。这个情况下很多后端程序员需要手动去修改路径。
fis 首要解决的问题是资源定位。
如果需要在部署时调整目录结构，可以通过 fis 的配置文件来实现。
fis 的配置文件默认是在项目根目录下的 fis-conf.js。
fis-conf.js 默认会有一个 fis 对象，可以使用它的 match 方法匹配文件，并在 match 函数的第二个参数中配置 release 的目录结构，其中$0 代表文件的原始路径。
fis.match("*.{js,scss}", { release: "/assets/$0", });
这之后再进行编译，就会多出一层 assets 的文件夹包裹 js 文件和 scss 文件。
编译与压缩
在构建过程如果要进行编译操作，也需要在 fis 的配置文件中进行配置。
编译 scss
编译 scss 文件需要 fis-parser-node-sass。
npm i -D fis-parser-node-sass
编写 scss 的编译配置。
// ... other code fis.match("**/*.scss", { // 使用 fis-parser-node-sass 插件，省略「fis-parser-」 parser: fis.plugin("node-sass"), // 重命名后缀名 rExt: "css", });
编译 ES6 语法
fis 官方提供了一个 fis-parser-babel-6.x 的插件，因为 fis 已经停止维护了，所以这个插件所使用的 babel 版本还是 6.x。
npm i -D fis-parser-babel-6.x
编写 js 的编译配置。
// ... other code fis.match("**/*.js", { parser: fis.plugin("babel-6.x"), });
代码压缩
压缩文件在配置对象中添加一个 optimizer 属性，来指定使用什么插件进行压缩。
fis 内部提供了代码压缩的插件，css 的是 clean-css，js 的是 uglify-js。这两个插件都是集成在 fis3 内部的，不需要单独安装。
fis.match("*.{js,scss}", { release: "/assets/$0", }); fis.match("**/*.scss", { // 使用 fis-parser-node-sass 插件，省略「fis-parser-」 parser: fis.plugin("node-sass"), // 重命名后缀名 rExt: "css", optimizer: fis.plugin("clean-css"), }); fis.match("**/*.js", { parser: fis.plugin("babel-6.x"), optimizer: fis.plugin("uglify-js"), });
查看编译信息
使用 fis3 inspect 命令可以查看编译过程中会编译哪些文件，使用哪些配置。
npx fis3 inspect
写在最后
自动化构建是前端工程化的第二块内容，到此讲解结束，接下来会发布另外几篇关于前端工程化的文章，敬请期待。
