Fis3版本:v3.4.22
Fis3的三大特性
资源定位:获取任何开发中所使用资源的线上路径
内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中
依赖声明:在一个文本文件内标记对其他资源的依赖关系
资源定位
资源定位的能力让我们不在关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。而工程师只需要使用相对路径来定位自己的开发资源即可。
html中资源定位
对html中的script、link、style、video、audio、embed等标签的src或href属性进行分析,一旦这些标签的资源定位属性可以命中已存在文件,则把命中文件的url路径替换到属性中,同时可保留原来url中的query查询信息。
img资源定位
<img title="百度logo" src="images/logo.gif"/>
编译后:
<img title="百度logo" src="/images/logo.gif"/>
会转成绝对路径
link资源定位
<link rel="stylesheet" type="text/css" href="demo.css">
编译后:
<link rel="stylesheet" type="text/css" href="/demo.css">
给资源添加虚拟目录
<img title="百度logo" src="images/logo.gif"/>
添加fis-conf.js文件,fis3的命令
fis.match('**.gif', {
//发布到/static/img/xxx目录下
release : '/static/img$0'
});
这里通过release添加了虚拟目录static,编译后
<img title="百度logo" src="/static/img/logo_74e5229.gif"/>
js定位资源
使用编译函数 __uri(path) 来定位资源
var img = __uri('images/logo.gif');
编译后:
var img = '/images/logo_.gif';
css定位资源
识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段,并将其替换成对应资源的编译后url路径。
.style {
background: url('images/body-bg.png');
}
编译后;
.style {
background: url('/images/body-bg.png');
}
最后
资源定位结果可以被Fis的配置文件控制,比如添加配置,调整文件发布路径。