fis3 html 变量替换,百度构建工具fis3常用命令及配置写法
目录
release发布命令
配置文件写法
资源定位写法
release发布命令
fis3 release -d
任意目录
fis3 release -h 获取更多参数
fis3 server start
启动内置服务器
fis3 server -h 获取更多参数
fis3 server open
打开内置服务器目录,不指定发布地址则默认发布到内置服务器中
自己的服务器替代内置Server
使用配置后 执行 fis3 release 即可
fis.match('*', { deploy: fis.plugin('local-deliver', { to: '/Users/my-name/work/htdocs' })})
fis3 release -w
文件监听
停止程序用快捷键 CTRL+c
fis3 release -wL
浏览器自动刷新
程序停止用快捷键 CTRL+c
配置文件写法 fis-conf.js
fis.match(selector, props);
selector:FIS3 把匹配文件路径的路径作为selector,匹配到的文件会分配给它设置的 props
props:编译规则属性,包括文件属性和插件属性,更多属性
fis.media()配置多种状态
比如:
fis3 release rd push 到 RD 的远端机器上
fis3 release qa push 到 QA 的远端机器上
fis.media('prod').match('*.js', { optimizer: fis.plugin('uglify-js')});
fis3 release prod 使用定义的prod方案
资源定位
html资源定位 不需要改变写法
FIS3 支持对html中的script、link、style、video、audio、embed等标签的src或href属性进行分析
js资源定位 __uri(path) 改变写法
源码:var js = __uri('demo.js');
编译后var js = '/static/js/demo_33c5143.js';
css资源定位 不改变写法,但要使用url() src=''
fis编译工具会识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段
源码:@import url('demo.css');
编译后@import url('/demo_7defa41.css');
源码:.style { background: url('images/body-bg.png'); }
编译后.style { background: url('/images/body-bg_1b8c3e0.png'); }
源码:.style { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-bg.png'); }
编译后.style { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/body-bg_1b8c3e0.png'); }
参考配置写法
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'
});
依赖声明
默认只有js和css文件会输出到manifest.json表中
添加html依赖只需配置如下
// fis-conf.js
fis.match('*.html', {
useMap: true
});
html依赖声明
css依赖声明
/**
* demo.css
* @require reset.css
*/
js依赖声明
//demo.js
/**
* @require demo.css
* @require list.js
*/```
#内容嵌入
适合合并文件,减少请求数
##在html中嵌入资源,给资源加 **?__inline**
html中嵌入图片base64
html中嵌入脚本资源
html中嵌入页面文件
demo.html content
##在js中嵌入资源 **__inline()**
在js中嵌入js文件
__inline('demo.js');
console.log('demo.js content');
在js中嵌入图片base64
var img = __inline('images/logo.gif');
var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';
在js中嵌入其他文本文件
var css = __inline('a.css');
var css = "body \n{ color: red;\n}";
##在css中嵌入资源 ?__inline
在css文件中嵌入其他css文件
@import url('demo.css?__inline');
img { border: 5px solid #ccc; };
在css中嵌入图片的base64
.style {
background: url(images/logo.gif?__inline);
}
.style {
background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}
fis3 html 变量替换,百度构建工具fis3常用命令及配置写法相关推荐
- java反编译命令jad,java反编译小工具jad常用命令
java反编译小工具jad常用命令 2014/6/11 19:39:24 sky52bc 程序员俱乐部 我要评论(0) 摘要:首先,看一下jad的帮助提示-a-用JVM字节格式来注解输出-af- ...
- 数据包构造分析工具Hping3常用命令集合大学霸IT达人
数据包构造分析工具Hping3常用命令集合大学霸IT达人 Hping是一个命令行下使用的TCPIP数据包组装分析工具.该工具的命令模式很像Unix下的ping命令.它不止能发送ICMP回应请求,还支持 ...
- 基于ARP的网络扫描工具netdiscover常用命令集合大学霸IT达人
基于ARP的网络扫描工具netdiscover常用命令集合大学霸IT达人 ARP是将IP地址转化物理地址的网络协议.通过该协议,可以判断某个IP地址是否被使用,从而发现网络中存活的主机.netdisc ...
- 批量探测工具fpingping常用命令集合大学霸IT达人
批量探测工具fpingping常用命令集合大学霸IT达人 批量探测工具fpingping是各个系统自带的基于ICMP协议的主机探测工具.但该工具一次只能检测一个主机,不满足渗透测试批量探测的需要.fp ...
- ARP探测目标工具arping常用命令集合大学霸IT达人
ARP探测目标工具arping常用命令集合大学霸IT达人 ARP协议是一种将IP地址转化物理地址的协议.通过ARP请求包和响应包,可以判断一个IP地址是否在使用.同理,通过该协议可以探测局域网主机是否 ...
- Wifitap是一个WiFi注入工具集常用命令集合大学霸IT达人
Wifitap是一个WiFi注入工具集常用命令集合大学霸IT达人 该工具集允许任何应用程序都可以发送和接收IP数据包,使用802.11流量捕获和注入,并通过WiFi网络简单配置接口wj0.Wifita ...
- 无线密码离线破解工具Pyrit常用命令集合大学霸IT达人
无线密码离线破解工具Pyrit常用命令集合大学霸IT达人 Pyrit是一款可以使用GPU加速的无线密码离线破解工具.该工具提供了大量的命令,可以用来实现不同的功能.使用Pyrit工具中的命令,可以通过 ...
- DNS信息探测工具DNSRecon常用命令
DNS信息探测工具DNSRecon常用命令 DNS探测是渗透测试信息收集中重要的一部分.DNS探测是为了从DNS服务器返回的记录中,获取更多信息.这种探测不用触发IDS/IPS即可获取网络设施相关的信 ...
- 网络扫描工具Nmap常用命令
网络扫描工具Nmap常用命令 Nmap是一款知名的网络安全审计工具.它免费.开源,可以快速完成各种网络审计功能.它提供了多种探测方式,基于各种网络协议规范,可以发现网络设备并探测设备的各种常见端口.利 ...
最新文章
- 如何根据SRA accession number 从NCBI下载数据
- 从变量到封装:一文带你为机器学习打下坚实的Python基础 By 机器之心2017年10月13日 10:43 本文整体梳理了 Python 的基本语法与使用方法,并重点介绍了对机器学习十分重要的且常
- UNIX高级环境编程(9)进程控制(Process Control)- fork,vfork,僵尸进程,wait和waitpid...
- 基于qt和mysql的地铁线路系统_[源码和文档分享]基于QT实现的可视化地铁换乘查询系统...
- asp控件Repeater运用
- CAN总线在嵌入式Linux下驱动程序的实现
- mysql web备份软件_GitHub - toolzone/mysql_web_backup: mysql数据库自动备份,web网站自动备份shell脚本...
- 数据挖掘之随机事件与随机变量
- 复述-软考网规--云计算专题
- Yarn分布式集群操作系统
- Seaborn学习(一)------- 构建结构化多绘图网格(FacetGrid()、map())详解
- struts2第一个程序的详解(配图)
- eclipse安装中文版插件
- 微型计算机启天m425显卡驱动,联想启天M425安装win7系统详细教程包括BIOS设置方法USB驱动...
- vue项目使用i18n插件实现多语言切换功能
- Java成员变量和局部变量
- 通灵学院|游戏设计研习10:迭代流程★(2000字)
- MySQL-数据库查询语言
- 如何做快手副业?怎么在快手上赚工资?快手发视频怎么赚钱?
- 乐高 42083 布加迪 Chiron(多图流量预警)