FIS —— 已經不再維護的前端構建系統 目錄

目錄

• FIS
  • FIS3初體驗 —— 發佈文件
  • FIS編譯與壓縮
    • sass文件編譯
    • js文件編譯
    • 文件壓縮
  • 調試

之前工作一直用到FIS，FIS2和FIS3都有用過，現在只是把學習筆記放上來，因爲手中實踐的東西較多，之後有時間會進行下一步的整理。

FIS

FIS是百度的前端團隊出款的一種構建系統，FIS現在也基本沒有團隊維護了，但是我們還需要了解一下他。相比於grunt和gulp，FIS的核心特點是高度集成。

他把前端日常開發中常見的開發任務和構建任務都集成在了內部，這樣開發者可以通過簡單的配置文件的方式去配置我們構建過程需要的工作。我們不需要在FIS中像grunt和gulp一樣定義任務，FIS中有一些內置任務，內置任務會根據開發過程自動完成構建任務。FIS中也有用於調試的web-server，可以很方便的調試構建結果。

FIS3初體驗 —— 發佈文件

1. 下載項目目錄 fis-demo-temp，安裝依賴npm install -g fis3
2. 使用fis3 release可以把項目發佈到一個臨時目錄中C:/Users/Administrator/AppData/Local/.fis3-tmp/www，這個使用fis3 server open就可以打開服務的默認地址
3. 我們可以指定目錄發佈的地址fis3 release -d output，發佈到根目錄下面的output文件夾中。

資源定位：release的發佈會讓我們引用文件的相對路徑轉化成絕對路徑，從而實現資源定位，是FIS中的核心特性。

作用： 是讓我們從開發的資源路徑徹底與部署之間的路徑分離開來，前端人員不用關心部署上線的目錄結構，我們只需要在開發階段使用相對路徑引用資源，通過fis構建之後的結果會自動將資源文件的引用路徑變成絕對路徑。

4. 如果要有部署的配置，需要創建fis-conf.js文件
5. 我們要把靜態資源文件放到assets目錄下，需要這樣配置

// fis的match方法是匹配對應文件，第一個參數是匹配規則，這裏面試文件夾下面的所有js,scss,png文件
// 第二個參數是對應的配置
fis.match('*.{js,scss,png}', {
  // release是發佈目錄
  // $0 指的是原始文件目錄結構
  release: '/assets/$0'
})

6. 運行fis3 release -d output可以看到目錄結構發生了變化

裏面的引用資源也變成了絕對定位

FIS編譯與壓縮

sass文件編譯

1. 安裝插件npm i fis-parser-node-sass
2. 在fis-conf.js中寫

fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.scss', {
  // 修改scss擴展名爲css
  rExt: '.css',
  // 使用插件fis-parser-node-sass，前面的不用寫
  parser: fis.plugin('node-sass')
})

3. 在命令行中執行fis3 release -d output可以看到，sass文件已經被轉換成css文件，在index.html的引用也變成了css

js文件編譯

1. 安裝插件npm i fis-parser-babel-6.x
2. 在fis-conf.js中寫

fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.js', {
  // 目前只有6.x版本，現在babel已經更新到7.x了
  parser: fis.plugin('babel-6.x')
})

3. 在命令行中執行fis3 release -d output可以看到，js文件已經被編譯了

文件壓縮

1. 因爲css和js壓縮是fis內置插件，所以直接在fis-conf.js中寫

fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.scss', {
  rExt: '.css',
  parser: fis.plugin('node-sass'),
  // fis內置css壓縮插件
  optimizer: fis.plugin('clean-css')
})

fis.match('**/*.js', {
  parser: fis.plugin('babel-6.x'),
  // fis內置js壓縮插件
  optimizer: fis.plugin('uglify-js')
})

調試

使用fis3 inspect命令可以看到對哪些文件進行了操作

fis3 inspect

# [INFO] Currently running fis3 (C:\Users\huqi\AppData\Roaming\npm\node_modules\fis3\)

# ~ /css/style.scss
# -- release /assets/css/style.css `*.{js,scss,png}`   (0th)
# -- rExt .css `**/*.scss`   (1th)
# -- parser [plugin `node-sass`] `**/*.scss`   (1th)
# -- optimizer [plugin `clean-css`] `**/*.scss`   (1th)


# ~ /dist/fis-conf.dev.js
# -- release /assets/dist/fis-conf.dev.js `*.{js,scss,png}`   (0th)
# -- parser [plugin `babel-6.x`] `**/*.js`   (2th)
# -- optimizer [plugin `uglify-js`] `**/*.js`   (2th)


# ~ /img/icon.png
# -- release /assets/img/icon.png `*.{js,scss,png}`   (0th)


# ~ /index.html
# -- empty

# ~ /js/app.js
# -- release /assets/js/app.js `*.{js,scss,png}`   (0th)
# -- parser [plugin `babel-6.x`] `**/*.js`   (2th)
# -- optimizer [plugin `uglify-js`] `**/*.js`   (2th)


# ~ /package-lock.json
# -- empty

# ~ ::package
# -- empty

# ~  plugin check
# installed plugins:
#  fis-parser-node-sass
#  fis-parser-babel-6.x
#  fis-optimizer-clean-css
#  fis-optimizer-uglify-js

# no more plugin are needed