fis3學習筆記

1、fis3是什麼，能幹什麼？

FIS3 是面向前端的工程構建工具，能夠解決前端中的性能優化，其實也就和gulp差很少，只不過gulp是輕量級的，須要什麼操做，下載相對應的插件，而fis3已經集成好了不少功能。

2、準備工做

一、首先要安裝node和npm

二、安裝fis3  -->  npm install -g fis3

三、測試一下是否安裝成功 -->  fis3 -v

四、升級fis3

npm update -g fis3

或者重裝 --> npm install -g fis3

3、熟悉fis3裏面的命令

fis3裏面內置了一個簡易的web server，能夠方便調試構建結果

一、fis3 server open -->打開web server的根目錄（www目錄）

二、fis3 release   -->將構建結果發佈到web server 的目錄下面

三、fis3 release -d +路徑  -->構建結果發佈到指定的目錄下面

四、fis3 server  start   -->啓動本地web server（瀏覽器將會被打開）

五、fis3 release -w   -->啓動文件監聽功能

六、fis3 release -wl   -->瀏覽器自動刷新

七、fis3 server -h  -->獲取更多參數

八、fis3 server clean  --> 清空web server下面的www目錄

九、fis3 inspect 能夠查看每一個文件對應分配到的屬性。

4、fis3配置文件（fis-conf.js）

說明：FIS3 編譯的整個流程都是經過配置來控制的。FIS3 定義了一種相似 CSS 的配置方式。固化了構建流程，讓工程構建變得簡單。（也就是說fis-conf.js文件上面存放全部構建指令，如壓縮資源、文件指紋等等操做，經過在終端之行fis3 release -d 就會根據fis-conf.js中的指令進行構建，把結果發佈到web server的www目錄下面。）

配置接口：fis.match(selector, props);

參數說明：

selector：FIS3 把匹配文件路徑的路徑做爲selector，匹配到的文件會分配給它設置的props。

props：編譯規則屬性，包括文件屬性和插件屬性

fis.media()：此接口提供多種狀態狀態功能（有些配置是僅供開發環境下使用，有些則是僅供生產環境使用）

fis.media('rd').match('*', {

　　deploy: fis.plugin('http-push', {

　　　　receiver: 'http://remote-rd-host/receiver.php'

　　})

});

fis.media('qa').match('*', {

　　deploy: fis.plugin('http-push', {

　　　　receiver: 'http://remote-qa-host/receiver.php'

　　})

});

終端執行：

• fis3 release rd push 到 RD 的遠端機器上
• fis3 release qa push 到 QA 的遠端機器上

一、資源定位：進行構建發佈以後，咱們能夠發現構建結果中的路徑進行了替換（如html中引用的js，css文件其引用路徑發生變換），有原來的相對路徑變成了絕對路徑。這就是fis的一個重要特性，資源定位。

注意：咱們還能夠經過配置指令，將全部靜態資源構建到指定目錄下：

如：

　　fis.match('*.{png,js,css}', {

　　　　release: '/static/$0'

　　});

執行fis3 release -d ./output 

構建結果以下：

二、文件指紋（惟一表示一個文件）

fis.match('*.{js,css,png}', {
　　useHash: true
});

三、壓縮資源

fis.match('*.js', { //js壓縮
　　// fis-optimizer-uglify-js 插件進行壓縮，已內置
　　optimizer: fis.plugin('uglify-js')
});

fis.match('*.scss', { //css壓縮
　　// fis-optimizer-clean-css 插件進行壓縮，已內置
　　optimizer: fis.plugin('clean-css')
});

fis.match('*.png', { //圖片壓縮
　　// fis-optimizer-png-compressor 插件進行壓縮，已內置
　　optimizer: fis.plugin('png-compressor')
});

四、cssSprite圖片合併

//只須要把css中引用的圖片後綴改爲 XXX.png?__sprite，實際的圖片不須要更名字，（實現的原理就是css處的?__sprite就是一個讓插件認識的標識符，插件會根據這個標識符進行圖片合併處理，並生成對應樣式）
fis.match('::package', { // 啓用 fis-spriter-csssprites 插件,需下載插件
　　spriter: fis.plugin('csssprites')
})

fis.match('*.scss', { // 對 CSS 進行圖片合併
　　useSprite: true
});

五、編譯sass文件

//涉及到插件安裝。
//安裝方式嘗試 :
//一、npm install fis-parser-node-sass -g
fis.match('*.scss', {
　　release:'/static/css$0',
　　rExt: '.css',
　　parser: fis.plugin('node-sass', {
　　// options...
　　})
});

六、有些時候在某種狀況下面不須要使用文件指紋圖片合併等操作，可使用以下方式

fis.media('debug').match('*.{js,scss,png}', { //終端執行 fis3 release debug
　　useHash: false,
　　useSprite: false,
　　optimizer: null
})

終端執行：fis3 release debug

5、嵌入資源（內容嵌入）

給資源加?_inline參數來標記資源嵌入需求

一、在html中嵌入資源  文件後面＋?__inline（圖片變成base64位,js,css會在html裏面）

-->   <link rel="stylesheet" type="text/css" href="demo.css?__inline">

-->   <script type="text/javascript" src="demo.js?__inline"></script>

-->   <img title="百度logo" src="images/logo.gif?__inline"/>

二、在js中嵌入資源

-->   var img = __inline('images/logo.gif'); 

-->   var css = __inline('a.css');

-->   __inline('demo.js');

三、在css中嵌入資源

-->   @import url('demo.css?__inline');

--> .style { background: url(images/logo.gif?__inline); }