By

前言

这是一个非常酷的功能，再也不用担心发布后资源目录需要调整。

在html中定位资源

对 

1

src
1

href
 属性就行处理

编译前

1
2
3

<img title="fis3 logo" src="logo.png"/>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="demo.js"></script>

在js中定位资源

使用编译函数 

1

__uri(path)
来定位资源

编译前

1
2
3
4
5

<script>
var img = __uri('logo.png');
var css = __uri('demo.css');
var js = __uri('demo.js');
</script>

在css中定位资源

1

url(path)
以及 
1

src=path
 字段

1
2
3
4
5
6
7
8
9

<style>
@import url('demo.css');
.style {
    background: url('logo.png');
}
.style {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png');
}
</style>

fis.match 匹配查询设置

比如匹配所有的文件进行hash文件名处理

1
2
3

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 规则

操作符

1

*
匹配0或多个除了 
1

/
 以外的字符 
1

?
 匹配单个除了 
1

/
 以外的字符 
1

**
 匹配多个字符包括 
1

/
 
1

{}
 可以让多个规则用 , 逗号分隔，起到或者的作用 
1

!
 出现在规则的开头，表示取反。即匹配不命中后面规则的文件

起始位置

fis-conf.js 所在目录

条件分组 $0 $1 $2

查询条件

1
2
3

fis.match('/a/({b,c}/**.js)', {
  release: '/static/$1$2'
});

$0 指整个条件 /a/ $1 指第一个子查询 (b/.js) $2 指第二个子查询 (c/.js)

启用hash方式

1
2
3

fis.match('*.{js,css,png,gif}', {
    useHash: true // 开启 md5 戳
});

useHash 属性 , 文件是否携带 md5 戳

设置发布文件目录

1
2
3
4
5
6
7
8
9

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

release 属性, 设置文件的产出路径

调整url

1
2
3

fis.match('**.js', {
    url : '/mm/static/js$0'
});

url 属性 , 指定文件的资源定位路径 默认是 release 的值，url可以与发布路径 release 不一致。

设置domain

1
2
3

fis.match('**.png', {
    domain: 'http://cdn.baidu.com/'
});

domain 属性 , 给文件 URL 设置 domain 信息 如果需要给某些资源添加 cdn，分配到此属性的资源 url 会被添加 domain；

运行并查看结果

源 uri.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在html中定位资源
<img title="fis3 logo" src="http://cdn.baidu.com/png_8652a39.png"/>
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在html中定位资源
<img title="fis3 logo" src="http://cdn.baidu.com/png_8652a39.png"/>
<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

我的博客