前端工程构建工具 FIS3

刚学习前端那会，我压根没想到会有这样的工具，也没有这种思想，直到遇到了 FIS3，我才恍然大悟，前端原来还可以这样玩。那么 FIS3 究竟能为前端开发带来哪些便捷呢？引用官方的一句话：

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

从上面的引用内容可以知道，FIS3 出现的背景是：

1、性能优化；

2、资源加载；

3、模块化开发：FIS提供了ModJS模块化方案让用户无需关注模块化方案细节，只需像NodeJS一样简单的声明模块依赖便能轻松完成模块化工作，支持同步、异步的加载方式和依赖的管理；

4、自动化工具；

5、开发规范；

6、代码部署；

通过 npm 来安装：

npm install -g fis3

安装完后，可以看下效果：

FIS3 的构建不会对源码做修改，而是构建产出到了另外一个目录，并且构建的结果才是用来上线使用的。下面是支持 fis3 的源代码目录：

├── app.js├── fis-conf.js├── img│   ├── list-1.png│   ├── list-2.png│   └── logo.png├── index.html└── style.css

通过目录中的 fis-conf.js 配置文件来对整个编译流程进行控制，基本配置语法：

规则的配置接口：

fis.match(selector, props);

selector 指要配置的文件路径，props 指把定义的属性作用于 selector 上。比如下面的例子把所有的资源文件打包到 static 文件夹下：

// fis-conf.jsfis.match('*.{png,js,css}', {    release: 'static/$0'})

执行 fis3 release -d ../output 后的目录结构为：

├── index.html└── static    ├── app.js    ├── img    │   ├── list-1.png    │   ├── list-2.png    │   └── logo.png    └── style.css

fis.media(): 配置多种状态

下面是不同状态处理不同的业务的例子：

fis.media('rd').match('*', {  deploy: fis.plugin('http-push', {    receiver: 'http://remote-rd-host/receiver.php'  })});
fis.media('qa').match('*', {  deploy: fis.plugin('http-push', {    receiver: 'http://remote-qa-host/receiver.php'  })});

fis3 release rd， 把代码 push 到 RD 的远端机器上；
fis3 release qa， 把代码 push 到 QA 的远端机器上；

文件指纹：浏览器开启缓存的时候，如果 URL 不发生变化，是无法刷新浏览器缓存的，往往在 URL 后加一个时间戳。而 FIS3 直接修改文件名，添加 MD5 戳。

fis.match('*.{js,css,png}', {  useHash: true});

资源压缩：可以对 css、png 文件进行压缩，比如 CSS 中的空格。

// 清除其他配置，只保留如下配置fis.match('*.js', {    // fis-optimizer-uglify-js 插件进行压缩，已内置    optimizer: fis.plugin('uglify-js')  });    fis.match('*.css', {    // fis-optimizer-clean-css 插件进行压缩，已内置    optimizer: fis.plugin('clean-css')  });    fis.match('*.png', {    // fis-optimizer-png-compressor 插件进行压缩，已内置    optimizer: fis.plugin('png-compressor')  });

图片合并：可以把多张图片合并到一张，减少请求次数。

调试

FIS3 内置了一个简易WebServer，可方便调试，通过

fis3 server start 来启动。发布代码时，直接通过 fis3 release 不指定目录即可发生到本地的 WebServer。通过 fis3 release -wL 发布代码可以监听文件变化，并可以实时在浏览器中看到效果，无需手动刷新。也可以把代码发送到开发机上（远端机器）：

fis.media('qa').match('*', {  deploy: fis.plugin('http-push', {    receiver: 'http://cq.01.p.p.baidu.com:8888/receiver.php',    to: '/home/work/htdocs' // 注意这个是指的是测试机器的路径，而非本地机器  })});

如果你本地开启了其它的 Web Server，也可以直接使用：

fis.match('*', {  deploy: fis.plugin('local-deliver', {    to: '/Users/my-name/work/htdocs'  })})

内置语法

FIS3 支持内容嵌入、定位资源和声明依赖。内容嵌入可以在HTML、JS 和 CSS 中嵌入资源，需要通过 __inline 来标记，比如：

// 编译前<link rel="stylesheet" type="text/css" href="demo.css?__inline">// 编译后<style>img { border: 5px solid #ccc; }</style>

mock 假数据模拟

当后端还没有完成接口开发，可以通过定制一个 json 文件来返回接口的内容。准备好假数据文件，如 sample.json 文件，放在服务器的 /mock/sample.json 目录下。可以通过http://127.0.0.1:8080/mock/sample.json 访问。

总结

以上是关于 FIS3 的简单介绍，想了解更多内容可以到官网上继续了解，有很详细的文档。总的来说，FIS3 让前端具有了模块化的能力，解决了资源加载的问题，代码部署更简单，可以把浏览器无法识别的内容编译成可识别的内容等。如果你想了解更多关于前端工程化的思想，也可以看看 webpack。

推荐阅读：

CSS基本语法与各类选择器

前端