【工具】fis3 - 使用教程（01）

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

---

安装

1. 首先安装nodejs,安装的同时会安装npm(该过程略过)，详细请参考教程https://nodejs.org，安装完成之后使用命令行工具测试是否安装成功。

windows系统下使用：node -v ,npm -v 命令；
mac系统下使用：sudo node -v和 sudo npm -v命令；

2. 安装fis3：
   使用npm命令:

windows系统下使用：npm install -g fis3 命令;
mac系统下使用：sudo npm install -g fis3 命令；

3. 安装完成后测试fis3是否安装成功：fis3 -v，若命令行或是mac上的终端工具显示fis那个很炫的标志的话，就表示安装成功啦~
   如图：
   

简单实例——入门接触

1. 现在我们使用百度fis3提供的一个项目(请先到github上下载项目)，我们使用命令行工具进入该项目的根目录，
   使用windows/mac:命令行 cd 命令逐层进入;
2. 在根目录下有一个fis-conf.js的配置文件，通常我们把该文件所在的目录即是项目的根目录（这是fis3的一个“约定”）；
3. 然后我们可以使用命令:

fis3 release -d ./output

构建发布到项目根目录下的output（该文件夹名称任意）目录中；
当然，你也可以发布到其他盘符中（windows系统下）；
4. 成功之后，你变output目录下方看到一个经过构建之后的项目了~
5. 通过diffMerge这个文件比较工具，可以发现其中的一些改动，即构建之前和构建之后的变化：

注意：fis有一个“资源定位”的功能，它能方便的把资源的相对路径在发布之后变换为绝对路径（部署路径），这极大节省了我们在发布项目上线时更改资源路径的工作。
6. 同时，我们可以将静态资源统一发布到一个目录下，比如output/static这个目录；
做法：在fis-conf.js文件中设置（先清除其他配置）：

fis.match(‘*.{png,js,css}’, {`
release: ‘/static/$0’
});

7 . 我们再次发布一下。运行fis3 release -d ./output命令,我们可以看到在output目录下生成了一个static文件夹，里面放着我们的静态资源；

进阶-fis3探索

配置文件

我们知道，配置文件的配置都写在了fis-conf.js这个文件中。

• fis.match(selector,props);

---

selector:是要匹配文件的路径，它字面意思有点像CSS中的“选择器”，我们可以这么理解：selector的设置可以影响到与该selector匹配的文件。这样就能反应到CSS的选择器这层关系上的理解了。
例如：

fis.match('*.js',{
	useHash:false
});//说明：匹配所有js文件，并将这些js文件的配置规则设置为useHash:false

是的，props是配置的规则属性。
规则属性分为：文件属性和插件属性。这点，后续我们会讨论。
面对规则属性，你需要知道的它的一点是：规则属性的“覆盖特性”，即应用相同的规则属性，后面应用的会覆盖前面应用的。

-fis.media();

---

能提供多种状态，这里的状态指的是配置环境。一种状态对应一种配置。
例如，有时我们希望在某种状态（如开发环境下）下编译对应的配置，那么我们就可以使用该配置的状态名，在执行发布（release）的时候就执行的是这个状态下的配置。

例如：

fis.media('develop').match('.js',{`
	optimizer: fis.plugin('uglify-js')
});

然后执行fis命令： fis3 release develop 我们就在状态develop下执行对js文件的压缩配置了。

注意：默认情况下fis3是在开发环境这个状态下（名称为“dev”，即media(‘dev’)）来执行配置的。

命令： fis3 inspect

通常，我们容易迷糊哪些文件匹配了，并且它们被分配到的规则属性是什么。
在fis3中给出了命令’fis3 inspect’,能帮助我们直观地看到文件都应用哪些规则属性。

文件指纹

听到“指纹”，你能联系到ID，因为指纹同id一样是唯一的。那么“文件指纹”你应该就能理解了。
在传统开发中，我们通常会给资源添加一个唯一标识，以便浏览器缓存。例如，,即加上时间戳的方式来唯一标识资源文件。

与传统不同，fis3中使用MD5戳 对资源文件进行唯一标识。

做法：配置文件
fis.match('*.{png,css,js}',{
	useHash:true//对匹配文件进行MD5戳配置
});

于是，在构建发布之后，你可以在output目录中看到资源文件的文件名是使用带有MD5戳的形式的。
如图：

资源压缩——文件配置压缩器

我们知道，对资源进行压缩能够提升web的性能，对降低带宽也是起到很大的作用。通常，在传统开发中我们把这项工作交给了服务端来做。现在我们可以通过如fis、gulp等这样的构建工具来方便快速的完成。

我们要使用规则属性中的“插件属性optimizer”来完成。

常用的插件属性有’uglify-js’、‘clean-css’、'png- compressor’等等。以上列出的都是fis3内置的插件，无需安装。

做法：配置文件 fis-conf.js
需要注意的是，使用插件属性的写法：
optimizer:fis.plugin(‘插件名称’)

fis.match('*.png', {
  // 使用png-compressor 插件对png图像文件压缩
  optimizer: fis.plugin('png-compressor')
});`

`fis.match('*.js', {
  // 使用uglify-js 插件对js文件压缩
  optimizer: fis.plugin('uglify-js')
});`

`fis.match('*.css', {
  // 使用clean-css 插件对CSS文件压缩
  optimizer: fis.plugin('clean-css')
});

然后`` 发布之后我们就能看到压缩之后的资源文件大小的变化。

雪碧图（Sprite）——资源图片合并

需要注意的是，fis3只会对在CSS文件中对资源路径中带有?__sprite的图片进行合并(如：background-image:url(‘./img/list-1.png?_sprite’))。对这些图片的合并不会影响到资源图片的显示效果。要知道，合并的目的是为了减少请求数量。

做法：配置文件fis-conf.js

1. 首先，我们先改写css文件中引用图片的路径的写法，带上?__sprite。
   注意：是2条“短下划线”
   如图：
   
2. 其次，在fis-conf.js中配置：
   我们要使用到插件‘csssprites’这个插件，使用spriter这个插件属性，并且在给匹配的文件分配useSprite属性。
   写法：

//(1)配置fis中使用csssprites
fis.config.set('modules.spriter','csssprites');
//(2)启用插件
fis.match('::packgae',{
	sprite:fis.plugin('csssprites')
});
//(3)分配属性
fis.match('*.css',{
   useSprite:true
});

于是，你在构建发布之后会发现生成了一个图片文件以及css文件的变化。如下图：


另外，我们还能对html中放在中的内联样式进行雪碧图处理。

做法：配置文件开头处添加

fis.config.set('settings.spriter.csssprites',{
//开启html内联样式
htmlUseSprite:true,
//<style></style>匹配正则
 styleReg: /(<style(?:(?=\s)[\s\S]?["'\s\w/-]>|>))([\s\S]?)(</style\s*>|$)/ig
});

虽然 fis3 支持对 background-size(不能跟 background-size 一起用)或scale(写size不能写background-size), background-repeat,background-position,margin(图片间距)，layout(图片排列方式，默认线性)，但是我们建议这些都可以不用配置，fis3会自动进行相应的处理。

---

OK，学习了以上这些知识，我们就能初步的对项目进行简单的构建了。需要注意的是，我们要灵活地将上面的知识点综合的组合起来应用！

下一次，将会带大家继续fis3的构建之路。