前端工程構建工具FIS3

時間 2019-12-09

標籤前端工程構建工具 fis3 fis 简体版

原文原文鏈接

FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。php

1、安裝

全局安裝fis3
```
npm install -g fis3 
```
查看是否安裝成功
```
fis3 -v
```

2、構建

官網提供了一個簡單例子，例子結構以下（很是簡單的由html、css、js以及幾張圖片構成）css

fis-conf.js是FIS3 配置文件，它所在的目錄爲項目根目錄html

構建發佈（目前fis-conf.js爲空）前端

- 構建發佈到指定路徑
- ```
fis3 release -d <path>
```
  如發佈到根目錄的output目錄下node
```
fis3 release -d ./output
```
- 對比構建前和構建後的html和css文件，會發現資源由原來的相對定位變成了絕對定位，這就是FIS3的資源定位。git
  - 好處有：① 資源發佈到任何靜態資源服務器任何路徑上，線上運行時都能找到它們； ② 代碼可移植性強，移植不用擔憂線上部署不一致的問題

3、配置文件

一、fis.match(selector, props)github

- selector：要匹配的文件路徑
- props：編譯規則屬性

fis.match('*.{png,js,css}', {   
  release: '/static/$0'
});

二、fis.media() 配置狀態npm

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

三、文件指紋性能優化

給文件添加 MD5 戳

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

四、壓縮資源

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

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

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

五、CssSprite圖片合併

// 啓用 fis-spriter-csssprites 插件
fis.match('::package', {
  spriter: fis.plugin('csssprites')
})

// 對 CSS 進行圖片合併
fis.match('*.css', {
  // 給匹配到的文件分配屬性 `useSprite`
  useSprite: true
});