【工具】fis3 - 语法教程(2)之定位资源
![](/assets/blank.gif)
⭐️ 本文首发自 前端修罗场(点击即可加入),一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。
现在加入,即可参与打卡挑战,和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会
,进而评估知识点的掌握程度,获得更全面的学习指导意见,不走弯路,不吃亏!
我们在第一篇中就曾经指出,资源定位是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 戳
});// 所有的 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})', {//发布到/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 戳
});// 所有的 js
fis.match('**.js', {//发布到/static/js/xxx目录下release : '/static/js$0',//访问url是/mm/static/js/xxxurl : '/mm/static/js$0'
});// 所有的 css
fis.match('**.css', {//发布到/static/css/xxx目录下release : '/static/css$0',//访问url是/pp/static/css/xxxurl : '/pp/static/css$0'
});// 所有image目录下的.png,.gif文件
fis.match('/images/(*.{png,gif})', {//发布到/static/pic/xxx目录下release: '/static/pic/$1',//访问url是/oo/static/baidu/xxxurl : '/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 戳
});// 所有的 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})', {//发布到/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');
}
【工具】fis3 - 语法教程(2)之定位资源相关推荐
- 【工具】fis3 - 语法教程(1)之资源嵌入
⭐️ 本文首发自 前端修罗场(点击即可加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估 ...
- 【工具】fis3 - 使用教程(01)
⭐️ 本文首发自 前端修罗场(点击即可加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估 ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- Android资源总结(开发工具/环境搭建/教程/论坛/博客/反编译工具)
Android资源总结(开发工具/环境搭建/教程/论坛/博客/反编译工具) 在Android发展前景相当好的情况下,本人最近搜集了一些关于Android的相关资源,当然包含以前发布的博客内容,进行了一 ...
- 鼠标侧键设置工具X-Mouse安装教程
鼠标侧键设置工具X-Mouse安装教程 X-Mouse是一款管理鼠标功能键的工具,通过它我们可以将鼠标的键赋予各种功能 下载地址:https://www.highrez.co.uk/downloads ...
- 工具集核心教程 | 第五篇: 利用Velocity模板引擎生成模板代码
前言 不知道大家有没有这样的感觉,在平时开发中,经常有很多dao.service类中存着很多重复的代码,Velocity提供了模板生成工具,今天我教大家怎么和这些大量的重复代码说再见. 参考项目:ht ...
- Python for虚幻引擎编辑器工具脚本学习教程
Python for Unreal Engine Editor Tools Scripting MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英 ...
- truffle (ETH以太坊智能合约集成开发工具) 入门教程
truffle (ETH以太坊智能合约集成开发工具) 入门教程 前言 在你了解区块链开发之前,你有必要了解区块链的一些基础知识,什么是DApp,DApp与传统app的区别, 什么是以太坊,以太坊中的智 ...
- CSS的预编译——less语言基本语法教程(入门)
less语言基本语法教程(入门) 一.CSS解析 css是一门标记性语言,语法简单,对使用者的要求也比较低. 缺点:1.对于css:使用css时需要书写大量的看似没有逻辑的代码,不方便维护和扩展,不利 ...
最新文章
- 线性回归api深度介绍
- docker安装(linux)
- 说说FATFS文件系统(转)
- 使用Outlook 2007连接到Exchange Server 2003、2007时出现没有默认网关的错误
- P4169 [Violet]天使玩偶/SJY摆棋子(CDQ分治、暴力)
- 排序(冒泡、选择、插入、希尔、快排、堆排、归并)
- WEB编程学习之配置阿里云+宝塔+WordPress
- 用汇编的眼光看C++(之类继承)
- cad卸载_CAD卸载清理工具(一键清理)
- 力扣-面试题 16.10. 生存人数
- Go语言编程(旧读书笔记)
- 三维GIS引擎平台设计
- 基于AT91SAM7se512的串口通讯的实现
- 从初级开发者到资深架构师,看这
- CSS常用的选择器学习
- 使用语音包合成你想说的话-文字转语音
- 终于可以舒服的看电子书了
- java毕业设计KTV点歌系统mybatis+源码+调试部署+系统+数据库+lw
- 利用计算机设计轴对称图案,“轴对称图形”信息技术应用设计与分析|轴对称图形有哪些图片...
- 陆化普:交通强国战略下城市交通发展要求与对策重点
热门文章
- 【Unity 3D】常见API的讲解以及在C#脚本中的执行(附源码)
- python中的turtle库中引用_python turtle库学习笔记
- The connection for the USB device '###' was unsuccessful. The device is currently in use
- 第一课:树莓派 刷机
- NOIP2021总结
- Graphics2d消除锯齿整理
- 手把手教你如何全新安装激活Win10系统
- 头脑风暴-移动搜索和传统搜索的不同之处
- FPS游戏初开发--逻辑分析总结
- 当人说君子动口不动手时怎么回怼_故事:君子动口不动手,神人动心不动口,有情有意事后再回报...