fis2 入門 fis3使用

2021-07-28 19:24:58 字數 2671 閱讀 8880

api:

【-v2.0】

api:       【-3.0】

f

1. 使用 fis 只需要三條命令:

fis server -h

//  檢視幫助

fis server strart

//  開啟服務

fis server open

//  檢視fis的根目錄

fis release

//  進行編譯並且傳送檔案到指定的目錄 預設的是無服務www目錄,會自動將當前專案投送到該目錄下面,並且會產生乙個map.json檔案,該檔案是靜態資源產出的對映檔案。

2. hello world的執行

cmd 下進入自己的專案目錄, 或者隨意建立乙個hello word!的專案 在cmd下進入

fis server start  -->會在預設的瀏覽器中開啟專案

fis release

->

投送到fis的伺服器目錄下面

fis open

->

檢視根目錄該檔案是否存在 

f5-> 重新整理頁面    hello world 生成

3. 靜態資源的壓縮

體驗fis的使用

cd .. 進入quickstart專案

fis release

fis open

fis release -o自動進行壓縮,也可以在fis-config.js中配置進行過濾。

配置fis-conf.js 設置需要合併的檔案,通過fis releaser -p進行合併,也可以通過fis  release -pd ./output一次指定合併後並且進行輸出到output這個資料夾下面。

4. 靜態資源操作後的替換

fis 本身不會進行靜態資源的替換,可以使用外掛程式fis-postpackager-******【npm install -g fis-postpackager-******】 進行替換,在 config.js 中進行配置【具體配置在文章後面有源**】,然後重新構建專案,就會進行自動的替換

fis release -omp

5. md5戳 或者  時間戳的配置見檔案目錄fis release -om

fis 對所有的靜態資源新增 md5 的版本號,同事更新資源引用路勁,是快取利用率達到最高。fis release -m

fis 中md5是根據檔案內容hash版本冗餘機制計算出來的,使用者**是不需要修改的

好處: 線上的a.js,上線的時候先上js因為是帶著hash的,不會影響線上效果,然後上html**,回滾的時候無需回滾js,只需要回滾html**即可。這樣子帶著hash的靜態資源會永久的快取,增大了快取的利用率

也可以使用時間戳的形式進行配置

6.  雪碧圖的自動合併

前提是在樣式新增標示,?__sprite就可以了: eg:url(./icons/icon_02.gif?__sprite)

只需要在使用的時候在後面新增?_inline就可以自動產生了

eg:background:url(../images/a.png?__inline);特別是對移動端的優化效能特比的好,必不可少的優化方案

fis release -opmd ./output// 可以一起連著寫,但是必須是d後面跟著的是檔案下的名稱

// 設定合併的最小間隔

fis.config.set('settings.spriter.csssprites.margin', 20);

// 取消下面的注釋開啟******外掛程式,注意需要先進行外掛程式安裝 npm install -g fis-postpackager-******  該外掛程式是fis的打包

fis.config.set('modules.postpackager', '******');

// 取消下面的注釋設定打包規則

fis.config.set('pack', );

// 取消下面的注釋可以開啟******對零散資源的自動合併

fis.config.set('settings.postpackager.******.autocombine', true);

//  配置成t=20160815格式的時間戳

var now = new date();

fis.config.set('timestamp', [now.getfullyear(), now.getmonth()+1, now.getdate(), now.gethours()].join(''));

fis.config.set('roadmap.path', [

',//usesprite: true

usehash: false

},]);

fis3 使用心得

因為專案原因,公司的框架選擇是fis3,因此我就接觸了下fis3這個東西。樓主沒用過webpack,gulp和grunt也不熟,fis3做為自己第乙個使用的打包工具,感覺真tm好用。本文主要就介紹一下對於fis3的使用心得 非常非常淺顯,僅限於個人粗淺理解,偏近應用。入門可以,深入不一定好 啥是fi...

FIS3的簡單使用

fis3 是什麼?能做什麼?fis3 是面向前端的工程構建工具。解決前端工程中效能優化 資源載入 非同步 同步 按需 預載入 依賴管理 合併 內嵌 模組化開發 自動化工具 開發規範 部署等問題。1 安裝 fis3是基於node和npm的構建工具,需要安裝node,沒安裝node的請自行安裝。這裡是參...

FIS3工作原理

fis3基於檔案物件進行構建,每個進入fis3的檔案都會例項化成乙個file物件。其構建流程大概分為三個階段 1.掃瞄專案目錄拿到檔案並初始化出乙個檔案物件的列表 掃瞄 2.對檔案物件中每乙個檔案進行單檔案編譯 編譯 3.獲取使用者設定的package外掛程式,進行打包處理 包括合併 打包 打包階段...