【工具】fis3 - 语法教程(2)之定位资源

2023-10-07 16:38:43 浏览数 (1)

我们在第一篇中就曾经指出，资源定位是fis3中很重要的特性之一。

它使得资源的部署问题具备很强的可移植性，不用担心路径的错误啦~

同样，它有3种定位方式：

代码语言：javascript复制
	1、在html中定位资源；
	2、在js中定位资源；
	3、在css中定位资源；

##（1）在html中定位资源

针对html，我们可以对scriptlinkstylevideoaudioembed等标签的src或href属性进行分析。

资源定位的结果（如，资源输出路径）可以通过fis.config这个配置文件进行配置。

配置如下：

代码语言：javascript复制
fis.match('*.{js,css,png,gif}', {
    useHash: true // 开启 md5 戳
});

// 所有的 js
fis.match('**.js', {
    //发布到/static/js/xxx目录下
    release : '/static/js$0'
});

// 所有的 css
fis.match('**.css', {
    //发布到/static/css/xxx目录下
    release : '/static/css$0'
});

// 所有image目录下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //发布到/statichttps://img.yuanmabao.com/zijie/pic/xxx目录下
    release: '/statichttps://img.yuanmabao.com/zijie/pic/$1$2'
});

编译之后，资源文件的路径将变化：

代码语言：javascript复制
源码(1)：
<img title="logo" src="images/logo.png"/>

编译后:

<img title="logo" src="/statichttps://img.yuanmabao.com/zijie/pic/logo_74e5229.png"/>

源码(2)：
<link rel="stylesheet" type="text/css" href="demo.css">

编译后:

<link rel="stylesheet" type="text/css" href="/static/css/demo_7defa41.css">

源码(3)：
<script type="text/javascript" src="demo.js"></script>

编译后:
<script type="text/javascript" src="/static/js/demo_33c5143.js"></script>

还有一个好用的地方，它可以做到发布目录和访问的url不一致：

在fis-config.js中配置如下：

代码语言：javascript复制
fis.match('*.{js,css,png,gif}', {
    useHash: true // 开启 md5 戳
});

// 所有的 js
fis.match('**.js', {
    //发布到/static/js/xxx目录下
    release : '/static/js$0',
    //访问url是/mm/static/js/xxx
    url : '/mm/static/js$0'
});

// 所有的 css
fis.match('**.css', {
    //发布到/static/css/xxx目录下
    release : '/static/css$0',
    //访问url是/pp/static/css/xxx
    url : '/pp/static/css$0'
});

// 所有image目录下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //发布到/statichttps://img.yuanmabao.com/zijie/pic/xxx目录下
    release: '/statichttps://img.yuanmabao.com/zijie/pic/$1',
    //访问url是/oo/static/baidu/xxx
    url : '/oo/static/baidu$0'
});

编译后，将得到：

代码语言：javascript复制
源码（1）：
<img title="logo" src="images/logo.png"/>

编译后：

<img title="logo" src="/oo/static/baidu/logo_74e5229.png"/>

源码（2）：

<link rel="stylesheet" type="text/css" href="demo.css">

编译后：

<link rel="stylesheet" type="text/css" href="/pp/static/css/demo_7defa41.css">

源码（3）：

<script type="text/javascript" src="demo.js"></script>

编译后：
<script type="text/javascript" src="/mm/static/js/demo_33c5143.js"></script>

可以看到，我们将资源发布到/static/这个目录下的css/js/images/下，但是我们访问资源的路径却是另一个。

（2）在js中定位资源

关键词：__url(path)编译函数

描述：使用该函数，在fis编译时，会分析js文件或是html中script标签内的内容，只要在脚本中包含该编译函数，编译时，都会替换为该函数所指向的文件的线上url路径。

例如：

（1）图片路径

代码语言：javascript复制
编译前：
var img=__url('img/logo.png');

编译后：
var img='/img/logo_74e5229.png';

(2)css路径

代码语言：javascript复制
编译前：

var css=__url('style.css);

编译后：

var css='/style_7defa41.css';

(3)js路径

代码语言：javascript复制
编译前：

var js=__url('demo.js');

编译后：

var js='/demo_33c5143.js';

当然，我们可以在fis-config.js中配置文件的发布路径：

代码语言：javascript复制
fis.match('*.{js,css,png,gif}', {
    useHash: true // 开启 md5 戳
});

// 所有的 js
fis.match('**.js', {
    //发布到/static/js/xxx目录下
    release : '/static/js$0'
});

// 所有的 css
fis.match('**.css', {
    //发布到/static/css/xxx目录下
    release : '/static/css$0'
});

// 所有image目录下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //发布到/statichttps://img.yuanmabao.com/zijie/pic/xxx目录下
    release: '/statichttps://img.yuanmabao.com/zijie/pic/$1'
});

经过编译之后，资源的发布路径将改变：

（1）图片路径

代码语言：javascript复制
编译前：
var img=__url('img/logo.png');

编译后：
var img=‘/statichttps://img.yuanmabao.com/zijie/pic/logo_74e5229.png’;

(2)css路径 编译前：

代码语言：javascript复制
var css=__url('style.css);

编译后：

var css='/static/css/demo_7defa41.css';

(3)js路径

代码语言：javascript复制
编译前：

var js=__url('demo.js');

编译后：

var js='/static/js/demo_33c5143.js';

##（3）在css中定位资源

css文件、html中内联样式中得urlsrc字段，都可以在编译时替换成指定的Url路径。

例如：

（1）外部css文件

代码语言：javascript复制
编译前：

@import url('demo.css');

编译后：

@import url('/demo_7defa41.css');

(2)样式

代码语言：javascript复制
编译前：

.div1 {
	background:url('img/logo.png');
}

编译后：

.div1 {
	background:url('/img/logo_1b8c3e0.png');
}

(3)兼容IE样式

代码语言：javascript复制
编译前：

.div2 {
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png');
}

编译后：

.div2 {
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo_1b8c3e0.png');
}

同样，在fis-config.js文件中我们可以进行配置发布路径，配置如下：

代码语言：javascript复制
fis.match('*.{js,css,png,gif}', {
    useHash: true // 开启 md5 戳
});

//所有的css文件
fis.match('**.css', {
    //发布到/static/css/xxx目录下
    release : '/static/css$0'
});

//所有image目录下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //发布到/statichttps://img.yuanmabao.com/zijie/pic/xxx目录下
    release : '/statichttps://img.yuanmabao.com/zijie/pic/$1$2'
});

编译之后，我们将得到指定的资源文件发布目录：

（1）外部css文件

代码语言：javascript复制
编译前：

@import url('demo.css');

编译后：

@import url('/static/css/demo_7defa41.css');

(2)样式

代码语言：javascript复制
编译前：

.div1 {
	background:url('img/logo.png');
}

编译后：

.div1 {
	background:url('/statichttps://img.yuanmabao.com/zijie/pic/img/logo_1b8c3e0.png');
}

(3)兼容IE样式

代码语言：javascript复制
编译前：

.div2 {
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png');
}

编译后：

.div2 {
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/statichttps://img.yuanmabao.com/zijie/pic/img/logo_1b8c3e0.png');
}
css 编译 工具 教程 语法

0 人点赞