Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22
Fis3的三大特性
资源定位:获取任何开发中所使用资源的线上路径
内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中
依赖声明:在一个文本文件内标记对其他资源的依赖关系
资源定位
资源定位的能力让我们不在关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。而工程师只需要使用相对路径来定位自己的开发资源即可。
html中资源定位
对html中的script、link、style、video、audio、embed等标签的src或href属性进行分析,一旦这些标签的资源定位属性可以命中已存在文件,则把命中文件的url路径替换到属性中,同时可保留原来url中的query查询信息。
img资源定位
<img title="百度logo" src="data:images/logo.gif"/>
编译后:
<img title="百度logo" src="/images/logo.gif"/>
会转成绝对路径
link资源定位
<link rel="stylesheet" type="text/css" href="demo.css">
编译后:
<link rel="stylesheet" type="text/css" href="/demo.css">
给资源添加虚拟目录
<img title="百度logo" src="data:images/logo.gif"/>
添加fis-conf.js文件,fis3的命令
fis.match('**.gif', {//发布到/static/img/xxx目录下release : '/static/img$0'
});
这里通过release添加了虚拟目录static,编译后
<img title="百度logo" src="/static/img/logo_74e5229.gif"/>
js定位资源
使用编译函数 __uri(path) 来定位资源
var img = __uri('images/logo.gif');
编译后:
var img = '/images/logo_.gif';
css定位资源
识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段,并将其替换成对应资源的编译后url路径。
.style {background: url('images/body-bg.png');}
编译后;
.style {background: url('/images/body-bg.png');}
最后
资源定位结果可以被Fis的配置文件控制,比如添加配置,调整文件发布路径。
Fis3的前端工程化之路[三大特性篇之资源定位]相关推荐
- 极客星球 | 前端工程化之路的探索与实践
前言 随着业务越来越重,越来越复杂,双倍工作量,团队规模肯定不会扩大双倍,蛮力已经无法持续高效的支持业务,如何因地制宜地打造出适合自己的前端工程化,成了每个到了一定规模的前端团队都在思考和探索的问题. ...
- Java三大特性篇之——继承篇(超详解的好吧!)
- 【前端精进之路】JS篇:第4期 作用域
文章目录 写在前面 作用域(Scope) 1.什么是作用域 2.全局作用域和函数作用域 3.块级作用域 作用域链 作用域链的创建 作用域与执行上下文 静态作用域与动态作用域 总结 写在前面 这里是小飞 ...
- 现代前端工程化-基于 Monorepo 的 lerna 模块(从原理到实战)
本文你能学到什么? 看完本文后希望可以检查一下图中的内容是否都掌握了,文中的例子最好实际操作一下,下面开始正文. 本文是前端工程化系列中的一篇,回不断更新,下篇更新内容可看文末的下期预告!宗旨:工程化 ...
- java 面向对象三大特性之继承 万字详解(超详细)
目录 前言 : 一.为什么需要继承: 二.什么是继承(Warning : 篇幅较长)? 1.继承概述: 2.子类继承父类之后达到的效果 : ①如何使用继承? ②代码演示 : 3.继承的使用场景: eg ...
- java 面向对象三大特性之多态 万字详解(超详细)
目录 前言 : 一.为什么需要多态 : 1.白璧微瑕 : 2.举栗(请甘雨,刻晴,钟离吃饭): 3.代码 : 4.问题 : 二.什么是多态 : 1.定义 : 2.多态的实现步骤(重要) : 三.多态的 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 从零开始学前端:CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗?(CSS:Day12)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法 快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置 搜索框输入"格式化",勾选上如图三个选项 ...
最新文章
- 模型不work怎么办?141页PPT告诉你怎么改模型
- 模拟IO 读写压力测试
- CSS之未知高度多行文本垂直居中
- sscanf函数—(sprintf的反)
- 《交互式程序设计 第2版》一3.5 捕获简单用户交互行为
- spyder开多个程序_【程序源代码】基于Vue+ElementUI web开发框架
- Angular应用双向绑定的语法糖
- JS实现的五级联动菜单效果完整实例
- python代码技巧_让你python代码更快的3个小技巧
- mysql死锁 简单例子_写一个Mysql死锁的例子
- HiveSQL解析过程详解
- 数据可视化分析工具大集合
- 如何在PR中同步音频和视频
- 在项目中怎样写故障树或者类层次
- 一文读懂分布式任务调度平台XXL-JOB
- APK Multi-Tool(反编译工具)教程
- 幸运彩票 分数 15作者 陈越单位 浙江大学
- 控制台版单机双人五子棋游戏(Java版)---新人小白
- webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色
- CSV文件如何使用EXCEL打开
热门文章
- 成员缩写_「gnps,nbcs」是什么意思?00后饭圈缩写你看懂多少
- tensorflow linux多卡训练_用Windows电脑训练深度学习模型?超详细配置教程来了
- java mysql乱码_41、java与mysql乱码的问题
- python统计学书籍推荐_一位90后统计学硕士的深悟:统计其实有门道!AI还能这样学!(精荐40本书+20视频资源...
- c6011取消对null指针的引用_C++中的引用
- Linux节点之间无密码问题,Linux下多节点SSH无密码互联实现
- django批量修改table_Django 数据库表多对多的创建和增删改查
- C#Winform调用wsdl接口webservice#http
- php 自旋锁,Linux内核自旋锁使用笔记
- java uncked_使用FindBugs对SpringSide1.0m3进行分析的结果