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

安装

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

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

安装fis3：
使用npm命令:

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

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

简单实例——入门接触

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

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

首先，我们先改写css文件中引用图片的路径的写法，带上?__sprite。
注意：是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的构建之路。

【工具】fis3 - 使用教程（01）相关推荐

H2O Wave教程---基于浏览器的实时显示工具---教程01
H2O Wave教程-基于浏览器的实时显示工具-教程01 0 写在前面 1 开始-动手操作起来 2 分类:一个是脚本,一个是app 3 脚本怎么写 0 写在前面总结一下自己学习H2Owave的学习情 ...
React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例目的巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
React从入门到精通教程01
React从入门到精通教程 React从入门到精通教程 React简介官方文档 React使用来干什么的为什么需要React React特点 React基础 React的使用 Hello Worl ...
ROS2机器人应用简明教程01文档
学习ROS2机器人操作系统第一步要做什么呢?下载最新的官方文档到本地: 在github搜索ros2_documentation,使用git或者浏览器下载均可. 使用说明: 下载的文档需要编译才可使用, ...
内网穿透工具nps使用教程 - 来自内部交流群
内网穿透工具nps使用教程.docx 内网穿透工具nps使用教程感谢感谢开源软件开发者,github链接https://github.com/cnlh/nps/ 感兴趣的去star下吧~ 视频教程 ...
CAD功能工具全自学教程与经典实例
CAD 功能工具全自学教程与经典实例课程内容: 本教程内容系统.全面,指导读者完成综合利用CAD基本命令绘制平面图形,再到了解绘制工程图的方法.技巧及 AutoCAD 高级应用的全过程.教程分 ...
ExtJS 4.2 教程-01：Hello ExtJS
本文转载自: https://www.cnblogs.com/youring2/p/3269503.html 作者:youring2 转载请注明该声明. 转载自起飞网,原文地址:http://www. ...
分布式版本控制工具 Mercurial 使用教程
本教程是介绍如何使用 Mercurial.我们不假定你有使用源代码控制管理(SCM) 软件的背景. 本教程有法文 FrenchTutorial,西班牙文 SpanishTutorial,日文 Jap ...
VAPS XT开发入门教程01：软件安装包
本文首发于:VAPS XT开发入门教程01:软件安装包上一篇:VAPS XT开发入门教程00:基本介绍 VAPS XT软件包括三个部分: 主程序,按照版本不同大小也不同,大概在800M~2GB左右 ...
Python for虚幻引擎编辑器工具脚本学习教程
Python for Unreal Engine Editor Tools Scripting MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英 ...

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

安装

简单实例——入门接触

进阶-fis3探索

配置文件

-fis.media();

命令： fis3 inspect

文件指纹

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

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

【工具】fis3 - 使用教程（01）相关推荐

最新文章

热门文章

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

安装

简单实例￼——入门接触

进阶-fis3探索

配置文件

-fis.media();

命令： fis3 inspect

文件指纹

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

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

【工具】fis3 - 使用教程（01）相关推荐

最新文章

热门文章

简单实例——入门接触