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外掛程式,進行打包處理 包括合併 打包 打包階段...