百度亲民前端构建工具fis3

什么是fis3？

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

安装：

npm install -g fis3

当出现以下图形则表示安装成功

 $ fis3 -v

[INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)
 v3.0.0
 /\\\\\\\\ /\\\\\\ /\\\\\
 /\/////////// /////\/// /\/////////\
 /\\ /\\ //\\ ///
 /\\\\\\ /\\ ////\
 /\/////// /\\ ////\
 /\\ /\\ ////\
 /\\ /\\ /\\ //\
 /\\ /\\\\\\ ///\\\\\/
 /// /////////// ///////////
 

安装完毕，在介绍之前我来说说我为什么使用fis。fis出的比较早，是国内百度出的，但前端工具这一块很多都是国外流行传近国内的，所以知道fis的人还是比较少的。我自己英语不好，嫌查文档不方便，就偷了个懒，选择fis作为我的开发工具（因为文档都是中文的~~）。还好fis经过慢慢的改进，到了fis3已经很强大了。

fis有很多功能，但是早期对于我来说fis的热更新对我来说帮助非常大，快速灵活的搭建本地服务，让我的开发效率大大提高。如果你是刚刚接触前端这门职业并且没有或者还没有找到一个合适的开发工具，不妨试试fis3，或许这就是你想要的。

先起个服务

在实际开发项目的时候，前端除了写静态页面，还有和后台的交互也是肯定少不了，所以这个时候我们就需要在本地起一个服务来保证数据的正确获取和发送。

fis起服务非常的简单和方便，首先进入项目页面：

fis1.png

按住shift键同时右键点击目录空白处，选择“在此处打开命令窗口”:

fis2.PNG

此时就弹出在当前目录路径下的命令窗口：

fis3.png

输入fis3 release回车

fis4.png

完成后再输入fis3 server start回车

fis5.png

如果服务启动成功会自动打开浏览器，访问 http://127.0.0.1:8080，这就是我们发布在本地的项目；如果项目根目录下有index.html，会自动打开index页面。
我们也可以手动输入http://127.0.0.1:8080（本地访问）或者http://192.168.0.106:8080（外网访问，就是命令窗口服务启动成功后下面的那个网址）；

热更新

本地服务是起起来了，但是我们开发项目的时候每次改动后想在浏览器看到效果，就要重复fis3 release+回车，这显然不是我们想要的。
所以我们的在release的时候给他加上参数：
fis3 release -wL
这样fis就会对本地文件进行监听，一旦本地文件有变化，就会在浏览器实时的更新出来~ _{（是不是很棒}，效率可是大大的提高哦）

构建

fis的本地服务启动了，其实就算入了门，可以应付日常的开发了，但是对于整个项目来说，fis还有更强大的功能。

fis之所以叫构建工具是它可以像搭积木一样把零散的资源与代码构建成一个完整的项目的能力。
而这些能力是通过fis-conf.js来实现的。在fis-conf.js中定义处理项目资源的规则。FIS3 定义了一种类似 CSS 的配置方式固化了构建流程，让工程构建变得简单。
like this：

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


文件指纹

文件指纹，唯一标识一个文件。在开启强缓存的情况下，如果文件的 URL 不发生变化，无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存，一种方式是添加时间戳，每次上线更新文件，给这个资源文件的 URL 添加上时间戳

而 FIS3 选择的是添加 MD5 戳，直接修改文件的 URL，而不是在其后添加 query。
对 js、css、png 图片引用 URL 添加 md5 戳，配置如下；

//清除其他配置，只剩下如下配置
 fis.match('.{js,css,png}', { 
 
 useHash: true 
 
 });

文件变化：

Paste_Image.png

资源合并

为了减少资源网络传输的大小，通过压缩器对 js、css、图片进行压缩是一直以来前端工程优化的选择。在 FIS3 中这个过程非常简单，通过给文件配置压缩器即可。

// 清除其他配置，只保留如下配置
 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')
 });

CssSprite图片合并

压缩了静态资源，我们还可以对图片进行合并，来减少请求数量。
FIS3 提供了比较简易、使用方便的图片合并工具。通过配置即可调用此工具并对资源进行合并。
FIS3 构建会对 CSS 中，路径带 ?__sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。

li.list-1::before {
 background-image: url('./img/list-1.png?__sprite');
 }

li.list-2::before {
 background-image: url('./img/list-2.png?__sprite');
 }

// 启用 fis-spriter-csssprites 插件
 fis.match('::package', {
 spriter: fis.plugin('csssprites')
 })

// 对 CSS 进行图片合并
 fis.match('*.css', {
 // 给匹配到的文件分配属性 useSprite
 useSprite: true
 });

结束语

对于fis3我就介绍到这里了，如果想了解更多fis3其他的功能，请看：
官方文档
最后补充一句，fis3开发常规项目是完全够用了，对新手友好，文档也详细。但是如果想使用vue，react这种要使用专门的文件做开发的框架，webpack肯定是首选，但是webpack的学习成本太大对新手不友好，所以这里推荐UC团队基于fis做的二次开发的构建工具Scrat可以作为过渡工具。

最最后_求波关注么么哒ヾ(o◕∀◕)ﾉヾ