目录
- release发布命令
- 配置文件写法
- 资源定位写法
release发布命令
fis3 release -d <path>
<path>任意目录
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依赖声明
<!--
@require demo.js
@require "demo.css"
-->
css依赖声明
/**
* demo.css
* @require reset.css
*/
js依赖声明
//demo.js
/**
* @require demo.css
* @require list.js
*/```
#内容嵌入
适合合并文件，减少请求数
##在html中嵌入资源，给资源加 **?__inline**
html中嵌入图片base64
<img title="百度logo" src="images/logo.gif?__inline"/>
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoY
html中嵌入样式文件
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
<style>img { border: 5px solid #ccc; }</style>
html中嵌入脚本资源
<script type="text/javascript" src="demo.js?__inline"></script>
<script type="text/javascript">console.log('inline file');</script>
html中嵌入页面文件
<link rel="import" href="demo.html?__inline">
<!-- this is the content of demo.html -->
<h1>demo.html content</h1>
##在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);
}
