前言
这是一个非常酷的功能，再也不用担心发布后资源目录需要调整。
在html中定位资源
对 src href 属性就行处理
编译前
[站外图片上传中……(2)]
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="demo.js"></script>
在js中定位资源
使用编译函数 __uri(path) 来定位资源
编译前
<script>
var img = __uri('logo.png');
var css = __uri('demo.css');
var js = __uri('demo.js');
</script>
在css中定位资源
url(path) 以及 src=path 字段
<style>
@import url('demo.css');
.style {
background: url('logo.png');
}
.style {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png');
}
</style>
fis.match 匹配查询设置
比如匹配所有的文件进行hash文件名处理
fis.match('*', {
useHash: true
});
API格式 fis.match(selector, props);
selector 查询条件
props 配置详细参考文
Glob 说明 , http://fis.baidu.com/fis3/docs/api/config-glob.html
更多属性 , http://fis.baidu.com/fis3/docs/api/config-props.html#%25E5%259F%25BA%25E6%259C%25AC%25E5%25B1%259E%25E6%2580%25A7
glob 规则
操作符
*匹配0或多个除了/以外的字符
?匹配单个除了/以外的字符
**匹配多个字符包括/
{}可以让多个规则用 , 逗号分隔，起到或者的作用
!出现在规则的开头，表示取反。即匹配不命中后面规则的文件
起始位置
fis-conf.js 所在目录
条件分组 $0 $1 $2
查询条件
fis.match('/a/({b,c}/**.js)', {
release: '/static/$1$2'
});
$0 指整个条件 /a/
$1 指第一个子查询 (b/.js)
$2 指第二个子查询 (c/.js)
启用hash方式
fis.match('*.{js,css,png,gif}', {
useHash: true // 开启 md5 戳
});
useHash 属性 , 文件是否携带 md5 戳
设置发布文件目录
fis.match('**.js', {
release : '/static/js/$0'
});
fis.match('**.css', {
release : '/static/css/$0'
});
fis.match('**.png', {
release : '/static/png/$0'
});
release 属性, 设置文件的产出路径
调整url
fis.match('**.js', {
url : '/mm/static/js$0'
});
url 属性 , 指定文件的资源定位路径
默认是 release 的值，url可以与发布路径 release 不一致。
设置domain
fis.match('**.png', {
domain: 'http://cdn.baidu.com/'
});
domain 属性 , 给文件 URL 设置 domain 信息
如果需要给某些资源添加 cdn，分配到此属性的资源 url 会被添加 domain；
运行并查看结果
源 uri.html
在html中定位资源
[站外图片上传中……(3)]
<link rel="stylesheet" type="text/css" href="/static/css/demo_3a5495f.css">
<script type="text/javascript" src="/static/js/demo_9b4f5bd.js"></script>
在js中定位资源
<script>
var img = 'http://cdn.baidu.com/png_8652a39.png';
var css = '/static/css/demo_3a5495f.css';
var js = '/static/js/demo_9b4f5bd.js';
</script>
在css中定位资源
<style>
@import url('/static/css/demo_3a5495f.css');
.style {
background: url('http://cdn.baidu.com/png_8652a39.png');
}
.style {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.baidu.com/png_8652a39.png');
}
</style>
配置 fis-conf.js
fis.match('*.{js,css,png,gif}', {
useHash: true // 开启 md5 戳
});
fis.match('**.js', {
release : '/static/js/$0'
});
fis.match('**.css', {
release : '/static/css/$0'
});
fis.match('**.(png)', {
release : '/static/png/$1',
url : '$1',
domain: 'http://cdn.baidu.com/'
});
运行 fis3 release
在html中定位资源
[站外图片上传中……(4)]
<link rel="stylesheet" type="text/css" href="/static/css/demo_3a5495f.css">
<script type="text/javascript" src="/static/js/demo_9b4f5bd.js"></script>
在js中定位资源
<script>
var img = 'http://cdn.baidu.com/png_8652a39.png';
var css = '/static/css/demo_3a5495f.css';
var js = '/static/js/demo_9b4f5bd.js';
</script>
在css中定位资源
<style>
@import url('/static/css/demo_3a5495f.css');
.style {
background: url('http://cdn.baidu.com/png_8652a39.png');
}
.style {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.baidu.com/png_8652a39.png');
}
</style>
fis/www/ 目录
fis3-uri
资源文件路径不要跨过fis-conf.js的根目录
代码
https://github.com/hans007/JavaScriptCodes/tree/master/fis3/uri
网友评论