前端自动化构建工具 - FIS3 - 第三节:定位资源

前言

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

在html中定位资源

对 src href 属性就行处理

编译前

[站外图片上传中……(2)]

在js中定位资源

使用编译函数 __uri(path) 来定位资源

编译前

在css中定位资源

url(path) 以及 src=path 字段

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)]



在js中定位资源


在css中定位资源

配置 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)]



在js中定位资源


在css中定位资源

fis/www/ 目录

fis3-uri

资源文件路径不要跨过fis-conf.js的根目录

代码

https://github.com/hans007/JavaScriptCodes/tree/master/fis3/uri

我的博客