fis3學習筆記

一、fis3是什么，能干什么？

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

二、准備工作

1、首先要安裝node和npm

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

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

4、升級fis3

npm update -g fis3

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

三、熟悉fis3里面的命令

fis3里面內置了一個簡易的web server，可以方便調試構建結果

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

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

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

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

5、fis3 release -w   -->啟動文件監聽功能

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

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

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

9、fis3 inspect 可以查看每個文件對應分配到的屬性。

四、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 的遠端機器上

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

注意：我們還可以通過配置指令，將所有靜態資源構建到指定目錄下：

如：

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

　　　　release: '/static/$0'

　　});

執行fis3 release -d ./output 

構建結果如下：

2、文件指紋（唯一表示一個文件）

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

3、壓縮資源

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')
});

4、cssSprite圖片合並

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

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

5、編譯sass文件

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

6、有些時候在某種情況下面不需要使用文件指紋圖片合並等操做，可以使用如下方式

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

終端執行：fis3 release debug

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

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

1、在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"/>

2、在js中嵌入資源

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

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

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

3、在css中嵌入資源

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

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