【前端】FIS3应用小记
接触FIS是在2014年11月左右,当时大二,在准备百度实习面试的时候网上迷路了,偶遇了FIS的官网,当时用了一下,觉得是一个基于Node.js的前端自动化解决方案,没太在意…后面在百度遇见了一些前端的小伙伴,才明白FIS的潜能,现在不管是自己的项目,还是以后公司的前端项目,都快离不来TA了,之前听一个学弟说最近他也在使用,并且存在不少问题,所以想写篇博文,给需要的小伙伴们。PS:我自己用的是MacOS系统,博文所述的FIS版本采用最新的FIS3。
【前端】FIS3应用小记
FIS3
FIS3:面向前端的工程构建工具,一套来自度厂的比较完整的前端开发解决方案,类似于grunt
。
FIS3安装
FIS3构建项目
资源定位
如下图,切换至项目fis-conf.js
所在根目录下,键入fis release -d <path>
,构建发布到项目目录的<path>
目录下(可以是子目录,也可以是父目录,e.g.:./output_son
,../output_father
)。
配置文件
默认配置文件为 fis-conf.js
,FIS3 编译的整个流程都是通过配置来控制的:
文件指纹
文件指纹:唯一标识一个文件。在开启强缓存的情况下,如果文件的 URL 不发生变化,无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存,一种方式是添加时间戳,每次上线更新文件,给这个资源文件的 URL 添加上时间戳。1
<img src="a.png?t=12012121">
而 FIS3 选择的是添加 MD5 戳,直接修改文件的 URL,而不是在其后添加 query。
对 js、css、png 图片引用 URL 添加 md5 戳,配置如下;
1 | //清除其他配置,只剩下如下配置 |
图片合并
压缩了静态资源,我们还可以对图片进行CssSprite合并,来减少请求数量。
FIS3 提供了比较简易、使用方便的图片合并工具。通过配置即可调用此工具并对资源进行合并。
FIS3 构建会对 CSS 中,路径带 ?__sprite 的图片进行合并。为了节省编译的时间,分配到 useSprite: true 的 CSS 文件才会被处理。
1 | li.list-1::before { |
启用 fis-spriter-csssprites 插件1
2
3
4
5
6
7
8
9// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});
功能组合
1 | // 加 md5 |
FIS3调试
FIS3 构建后,默认情况下会对资源的 URL 进行修改,改成绝对路径。这时候本地双击打开文件是无法正常工作的。这给开发调试带来了绝大的困惑。
FIS3 内置一个简易 Web Server,可以方便调试构建结果。
构建时不指定输出目录,即不指定 -d 参数时,构建结果被发送到内置Web Server的根目录下,此目录可以通过执行以下命令打开。(和hexo的debug server同理)
开启目录
构建时不指定输出目录,即不指定 -d 参数时,构建结果被发送到内置 Web Server 的根目录下。此目录可以通过执行以下命令打开。fis server open
发布项目
不加 -d 参数默认被发布到内置 Web Server的根目录下,当启动服务时访问此目录下的资源。fis release
启动测试
fis server start
来启动本地 Web Server,当此 Server 启动后,会自动浏览器打开 http://127.0.0.1:8080,默认监听端口 8080,通过执行以下命令得到更多启动参数,可以设置不同的端口号(当 8080 占用时)fis server -h
PS:
启动 Web Server 以后,会自动打开浏览器,访问 http://127.0.0.1:8080 URL,这时即可查看到页面渲染结果。正如所有其他 Web Server,FIS3 内置的 Server 是常驻的,如果不重启计算机或者调用命令关闭是不会关闭的。所以后续只需访问对应链接即可,而不需要每次 release 就启动一次 server。
文件监听
为了方便开发,FIS3 支持文件监听,当启动文件监听时,修改文件会构建发布。而且其编译是增量的,编译花费时间少。
FIS3 通过对 release 命令添加 -w 或者 —watch 参数启动文件监听功能。
fis3 release -w
添加 -w 参数时,程序不会执行终止;停止程序用快捷键 CTRL+C
浏览器自动刷新
文件修改自动构建发布后,如果浏览器能自动刷新,这是一个非常好的开发体验。FIS3 支持浏览器自动刷新功能,只需要给 release 命令添加 -L 参数,通常 -w 和 -L 一起使用。
fis3 release -wL
程序停止用快捷键 CTRL+C
发布到远端机器
开发项目后,需要发布到测试机(联调机),一般可以通过如 SMB、FTP 等上传代码。FIS3 默认支持使用 HTTP 上传代码,首先需要在测试机部署上传接收脚本(或者服务),这个脚本非常简单,下面的receiver.php
给出了 php 的实现版本,可以把它放到测试机上某个 Web 服务根目录,并且配置一个 url 能访问到即可。
示例脚本是 php 脚本,测试机 Web 需要支持 PHP 的解析,如果需要其他语言实现,请参考这个 php 脚本实现。(假定这个 URL 是:http://cq.01.p.p.baidu.com:8888/receiver.php)
那么我们只需要在配置文件配置:
1 | fis.match('*', { |
receiver.php:
1 |
|
替代内置Server
FIS3 内置了一个 Web Server 提供给构建后的代码进行调试。如果你自己启动了你自己的 Web Server 依然可以使用它们。
假设你的 Web Server 的根目录是 /Users/my-name/work/htdocs
,那么发布时只需要设置产出目录到这个目录即可。
fis3 release -d /Users/my-name/work/htdocs
如果想执行 fis3 release 直接发布到此目录下,可在配置文件配置;
1 | fis.match('*', { |
FIS内置语法
FIS3使用
FIS3使用心得+图文实例
持续更新中…