目錄

• release發(fā)布命令
• 配置文件寫法
• 資源定位寫法

release發(fā)布命令

fis3 release -d <path>

<path>任意目錄
fis3 release -h 獲取更多參數(shù)

fis3 server start

啟動內(nèi)置服務(wù)器
fis3 server -h 獲取更多參數(shù)

fis3 server open

打開內(nèi)置服務(wù)器目錄，不指定發(fā)布地址則默認(rèn)發(fā)布到內(nèi)置服務(wù)器中

自己的服務(wù)器替代內(nèi)置Server

使用配置后 執(zhí)行 fis3 release 即可
fis.match('*', { deploy: fis.plugin('local-deliver', { to: '/Users/my-name/work/htdocs' })})

fis3 release -w

文件監(jiān)聽
停止程序用快捷鍵 CTRL+c

fis3 release -wL

瀏覽器自動刷新
程序停止用快捷鍵 CTRL+c

配置文件寫法 fis-conf.js

fis.match(selector, props);

selector：FIS3 把匹配文件路徑的路徑作為selector，匹配到的文件會分配給它設(shè)置的 props
props：編譯規(guī)則屬性，包括文件屬性和插件屬性，更多屬性

fis.media()配置多種狀態(tài)

比如：

• 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等標(biāo)簽的src或href屬性進行分析

js資源定位 __uri(path) 改變寫法

源碼：var js = __uri('demo.js');
編譯后var js = '/static/js/demo_33c5143.js';

css資源定位 不改變寫法，但要使用url() src=''

fis編譯工具會識別css文件或 html的style標(biāo)簽內(nèi)容 中 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', {
    //發(fā)布到/static/js/xxx目錄下
    release : '/static/js$0'
});

// 所有的 css
fis.match('**.css', {
    //發(fā)布到/static/css/xxx目錄下
    release : '/static/css$0'
});

// 所有image目錄下的.png，.gif文件
fis.match('/images/(*.{png,gif})', {
    //發(fā)布到/static/pic/xxx目錄下
    release: '/static/pic/$1'
});

依賴聲明

默認(rèn)只有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
 */```


#內(nèi)容嵌入
適合合并文件，減少請求數(shù)
##在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);
}