前言

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

在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

我的博客