关于web性能的思考与分享[10]-fis3构建工具-语法教程(2)之定位资源
来源:互联网 发布:mysql优化书籍 编辑:程序博客网 时间:2024/06/05 16:31
我们在第一篇中就曾经指出,资源定位是fis3中很重要的特性之一。
它使得资源的部署问题具备很强的可移植性,不用担心路径的错误啦~
同样,它有3种定位方式:
1、在html中定位资源; 2、在js中定位资源; 3、在css中定位资源;
(1)在html中定位资源
针对html,我们可以对script\link\style\video\audio\embed等标签的src或href属性进行分析。
资源定位的结果(如,资源输出路径)可以通过fis.config这个配置文件进行配置。
配置如下:
fis.match('*.{js,css,png,gif}', { useHash: true // 开启 md5 戳});// 所有的 jsfis.match('**.js', { //发布到/static/js/xxx目录下 release : '/static/js$0'});// 所有的 cssfis.match('**.css', { //发布到/static/css/xxx目录下 release : '/static/css$0'});// 所有image目录下的.png,.gif文件fis.match('/images/(*.{png,gif})', { //发布到/static/pic/xxx目录下 release: '/static/pic/$1$2'});
编译之后,资源文件的路径将变化:
源码(1):<img title="logo" src="images/logo.png"/>编译后:<img title="logo" src="/static/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中配置如下:
fis.match('*.{js,css,png,gif}', { useHash: true // 开启 md5 戳});// 所有的 jsfis.match('**.js', { //发布到/static/js/xxx目录下 release : '/static/js$0', //访问url是/mm/static/js/xxx url : '/mm/static/js$0'});// 所有的 cssfis.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})', { //发布到/static/pic/xxx目录下 release: '/static/pic/$1', //访问url是/oo/static/baidu/xxx url : '/oo/static/baidu$0'});
编译后,将得到:
源码(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)图片路径
编译前:var img=__url('img/logo.png');编译后:var img='/img/logo_74e5229.png';
(2)css路径
编译前:var css=__url('style.css);编译后:var css='/style_7defa41.css';
(3)js路径
编译前:var js=__url('demo.js');编译后:var js='/demo_33c5143.js';
当然,我们可以在fis-config.js中配置文件的发布路径:
fis.match('*.{js,css,png,gif}', { useHash: true // 开启 md5 戳});// 所有的 jsfis.match('**.js', { //发布到/static/js/xxx目录下 release : '/static/js$0'});// 所有的 cssfis.match('**.css', { //发布到/static/css/xxx目录下 release : '/static/css$0'});// 所有image目录下的.png,.gif文件fis.match('/images/(*.{png,gif})', { //发布到/static/pic/xxx目录下 release: '/static/pic/$1'});
经过编译之后,资源的发布路径将改变:
(1)图片路径
编译前:var img=__url('img/logo.png');编译后:var img=‘/static/pic/logo_74e5229.png’;
(2)css路径
编译前:
var css=__url('style.css);编译后:var css='/static/css/demo_7defa41.css';
(3)js路径
编译前:var js=__url('demo.js');编译后:var js='/static/js/demo_33c5143.js';
(3)在css中定位资源
css文件、html中内联样式中得url\src字段,都可以在编译时替换成指定的Url路径。
例如:
(1)外部css文件
编译前:@import url('demo.css');编译后:@import url('/demo_7defa41.css');
(2)样式
编译前:.div1 { background:url('img/logo.png');}编译后:.div1 { background:url('/img/logo_1b8c3e0.png');}
(3)兼容IE样式
编译前:.div2 { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png');}编译后:.div2 { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo_1b8c3e0.png');}
同样,在fis-config.js文件中我们可以进行配置发布路径,配置如下:
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})', { //发布到/static/pic/xxx目录下 release : '/static/pic/$1$2'});
编译之后,我们将得到指定的资源文件发布目录:
(1)外部css文件
编译前:@import url('demo.css');编译后:@import url('/static/css/demo_7defa41.css');
(2)样式
编译前:.div1 { background:url('img/logo.png');}编译后:.div1 { background:url('/static/pic/img/logo_1b8c3e0.png');}
(3)兼容IE样式
编译前:.div2 { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png');}编译后:.div2 { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/pic/img/logo_1b8c3e0.png');}
0 0
- 关于web性能的思考与分享[10]-fis3构建工具-语法教程(2)之定位资源
- 关于web性能的思考与分享[09]-fis3构建工具-语法教程(1)之资源嵌入
- 关于web性能的思考与分享[06]——【原创】fis3构建工具使用教程(01)
- 关于web性能的思考与分享[07]——【原创】fis3构建工具使用教程(02)
- 关于web性能的思考与分享[05]——gulp自动化构建工具入门教程
- 关于web性能的思考与分享[03]——常用性能分析工具
- 关于web性能的思考与分享[02]——静态资源
- 关于web性能的思考与分享[01]——http性能
- 【性能】关于web性能的思考与分享[12]——ChromeDevTool高级调式
- 关于web性能的思考与分享[04]——页面优化方案
- 关于web性能的思考与分享[11]-Http协议理解
- 关于web性能的思考与分享[08]雅虎14条军规—高性能网站建设指南
- 构建工具fis3的使用
- Fis3 前端工程构建工具
- fis3前端工程构建工具使用小结
- 前端构建工具-fis3使用入门
- FIS3.一个强大的前端工程构建工具的初级超级实用功能讲解
- 关于个人修养与构建和谐校园的思考
- Openstack Nova API服务流程
- 网络传输层TCP协议InputStream read方法是否返回-1
- web项目中界面(jsp或者js)之间参数的传递
- 关于宽度高度-css 傻傻分不清楚
- Java基础之switch语句
- 关于web性能的思考与分享[10]-fis3构建工具-语法教程(2)之定位资源
- 34.UIImage — 把多张图片合成一张图
- Hadoop集群完全分布式搭建教程-CentOS
- 各种定位-css 傻傻分不清楚
- 【C语言】利用kill函数实现一个进程向另一个进程发送信号
- Android 错误提示:Conversion to Dalvik format failed with error 1 解决办法
- 《线性代数及其应用》
- 芒果iOS开发之Project/Users/用户名/.../xxx.xcodeproj cannot be open because the project file cannot be parsed
- 23种设计模式(19)_行为型_解释器模式(Interpreter Pattern)