整理總結：前端工程構建工具fis3篇

FIS3 一個略微小衆的被置棄維護了的前端工程構建工具，解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題。

在全民擁抱webpack的時代裏，簡單留個筆記 是愛過的印記ღ( ´･ᴗ･` )

1、工做原理

FIS3 是基於文件對象進行構建的，每一個進入 FIS3 的文件都會實例化成一個 File 對象，整個構建過程都對這個對象進行操做完成構建任務。

構建的時候生成一張資源依賴表。瀏覽器或者後端模板語言在解析的過程當中經過查表獲得某個靜態資源在不一樣環境下的引用路徑。

2、經常使用功能

1. 內置語法支持內容嵌入

這個功能能夠支持一些公共模塊部分抽取出來管理

## html中嵌入頁面文件 
//編譯前
<link rel="import" href="demo.html?__inline」>
//編譯後  直接把demo.html的代碼嵌入
<h1>demo.html content</h1>

-----------------------------------

## 樣式同理
//編譯前
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
//編譯後  內容展開直接把demo.css的的代碼嵌入到<style>
<style>img { border: 5px solid #ccc; }</style>

2.引用資源

## 在css中引用資源
@import url('demo.css?__inline’);//在css在引入其餘樣式 編譯後直接合並同一份資源，減小頁面網絡資源請求

## 在js在引用資源
__inline('demo.js’); //引入其餘js
__inline('./groupActivity.html’), //引入模板， 例如vue的組件

3.定位資源

//使用__uri讀取相對於當前文件夾的相對路徑。
__uri('demo.js’); 
若是連接有參數時 它也只是當成字符串處理~  不完美的地方之一囉

4.雪碧圖合併

配置上 須要用到csssprites的plugin。
是個有意思但並不常有的功能 可是侷限性在於須要寫去單獨的標籤或者僞類裏面才能正確合併，並且 到後面版本 已經再也不支持。

li.list-1::before { //用單獨的裝載
  background-image: url('./img/list-1.png?__sprite'); //打上__sprite標誌
}
li.list-2::before {
  background-image: url('./img/list-2.png?__sprite');
}
//編譯後 就默認讀取一張是合併後的雪碧圖

3、配置接口

1. fis.match(selector, props) 設置規則的配置接口

fis.match('{a,b}.js', { release: '/static/$0' });

2. fis.media(mode) 設置多種狀態接口

//配置在有cdn的狀況下執行
fis.media('cdn').match('*.js', { 
    optimizer: fis.plugin('uglify-js’)
});
# 終端執行 就會觸發進行壓縮。
$ fis3 release cdn

3. fis.set(key) fis.get(key) 設值取值

fis.set('charset', 'utf-8’); 
fis.get('charset'); 

//構建時被忽略，可設置project.ignore的值實現
fis.set('project.ignore', [ 
  'output/**',
  'node_modules/**',
  '.git/**',
  '.svn/**'
]);

4. fis.plugin(name [, props [, position]]) 插件調用接口

編譯流程：

lint：  //代碼校驗檢查，比較特殊，因此須要 release 命令命令行添加 -l 參數
parser：//預處理階段，好比 less、sass、es六、react 前端模板等都在此處預編譯處理
preprocessor：  //標準化前處理插件, 例如加自動前綴  autoprefixer
standard：      //標準化插件，處理內置語法
postprocessor： //標準化後處理插件

配置啓用某些插件的四個擴展點:

prepackager      //打包前處理插件擴展點
packager         //打包插件擴展點，經過此插件收集文件依賴信息、合併信息產出靜態資源映射表
spriter          //圖片合併擴展點，如 csssprites
postpackager     //打包後處理插件擴展點

4、經常使用命令

fis3 server 服務

• 查看所有關於server的命令詳情：fis3 server —help
• 啓動：fis3 server start
• 中止：fis3 server stop
• 清除文件：fis3 server clean

• 參數說明[可疊加使用]

  • --root //指定根目錄
  • --port //指定端口
  • --type //指定類型
  • --timeout //設置時間超時

# 指定根目錄到output 端口1234 指定類型是jello 起服務
$ fis3 server start --root ../output --port 1234 --type node

fis3 release 編譯發佈

• 查看所有關於release的命令詳情：fis3 release —help

• 參數說明[可疊加使用]

  • -w 》等同於 --watch //監聽
  • -L 》等同於 --live //熱更新
  • -c 》等同於 --clean //清緩存

5、安裝使用

1.安裝node和npm 對版本有要求。

2.全局安裝fis3

# 全局安裝
$ npm install -g fis3

# 安裝後 可查看版本
$ fis3 -v
  
# 查看fis3 命令提供的功能

3.fis3 init 模板名

$ fis3 init 模板名 //不寫模板名 就用默認模板html的

模板名可在fis-scaffold中選擇適合的模板。

其中jello模板。jello+velocity模板的框架最主要的特色就是實現先後端開發分離，先後端同事只需在開發前期將接口數據約定好，便可獨立進行開發工做。前端人員能夠經過json數據模擬，便可在jello環境中預覽頁面。

這也是選擇fis做爲編譯工具的緣由之一。

4.進入項目 跑起來

fis3 server start 起服務
fis3 release 監聽就能搞起來了

fis有個問題 它是全局的 因此每次構建的都系都放在上次構建的地方 就算是跨項目了以後也是， 這個是它的問題之一。

6、配置文件 fis-conf.js

fis默認找名字叫fis-conf.js讀取配置。自行補充調整適合的配置

var pageName = "project_name";  //當前項目的名稱
var static_path = "static";//靜態資源的相對路徑,默認爲static
var html_path = "html";//HTML文件的相對路徑,默認爲html
var cdn_url = 'https://baidu.com//' + pageName;//CDN的地址

fis.set('charset', 'utf-8');

/////啓用打包
fis.match('::package', {
  // spriter: fis.plugin('csssprites'),
  postpackager: fis.plugin('loader')
});

//啓用less編譯
fis.match('*.less', {
  parser: fis.plugin('less'),
  rExt: '.css'
});

// 自動給 css 屬性添加前綴,讓標準的 css3 支持更多的瀏覽器. 
fis.match('*.{css,less}', {
  // useSprite: true, 
  release: '/' + static_path + '/$0', //若設置 release 爲 FALSE，則再也不產出此文件
  preprocessor: fis.plugin('autoprefixer', { //preprocessor打包前執行
    "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
    "cascade": true
  })
});

fis.match('*.es', {
  parser: fis.plugin('babel-5.x'),
  rExt: 'js',
  isMod: false,
  release: '/' + static_path + '/$0',
});

//開始合併、打包各個模塊
fis.match('/module/**.{less,css}', {
  packTo: '/css/' + pageName + '.css'
});
fis.match('/module/**.js', {
  packTo: '/js/' + pageName + '.js'
});

//轉換爲png8格式，文件大小會減小不少，可是會有必定程度的顏色、alpha丟失,不用時就註釋掉。
fis.match('*.png', {
  optimizer: fis.plugin('png-compressor', { type: "pngquant" })
});

//設置發佈路徑
fis.match('*', {
  release: '/' + static_path + '/$0'
});
fis.match('/*.html', {
  release: '/' + html_path + '/$0'
});

fis.match('htmlInsert/*.html', {
  release: '/' + static_path + '/module/$0'
});

// 定義一個fis3 release cdn的命令 執行一下打包命令

//打上md5戳而且發佈CDN地址
fis.media('cdn').match('*.{less,png,js,jpg,css,svg,gif,es,json}', {
  domain: cdn_url, // 資源路徑
  useHash: true,   //設置爲true則開啓md5戳，默認全部放在cdn中的文件都打上MD5戳；
  release: '/' + static_path + '/cdn/$0'
});
// 壓縮js文件
fis.media('cdn').match('*.{js,es}', {
  optimizer: fis.plugin('uglify-js') //使用插件
});

//找個地方放一下insert的html...
fis.media('cdn').match('htmlInsert/*.html', {
  release: '/' + static_path + '/cdn/module/$0'
});

// 壓縮css文件
fis.media('cdn').match('*.{less,css}', {
  optimizer: fis.plugin('clean-css')
});

//不須要發佈的文件列表
fis.set('project.ignore', [
  'fis-conf.js',
  'gulpfile.js',
  '.git/**',
  '*.bat',
  '*.sh',
  'node_modules/**',
  'package-lock.json'
]);

mark一下 僅供參考 歡迎更正補充 Thanks

---

參考資料：
官網：http://fis.baidu.com/fis3/ind...
npm關於jello的介紹：https://www.npmjs.com/package...
jello+velocity模板:
https://wenku.baidu.com/view/...
http://fex.baidu.com/blog/201...