(1)release發布命令
fis3 release -d
任意目錄
fis3 release -h 獲取更多引數
fis3 server start
啟動內建伺服器
fis3 server -h 獲取更多引數
fis3 server open
開啟內建伺服器目錄,不指定發布位址則預設發布到內建伺服器中
自己的伺服器替代內建server
使用配置後 執行 fis3 release 即可
fis.match('*', )})
fis3 release -w
檔案監聽
停止程式用快捷鍵 ctrl+c
fis3 release -wl
瀏覽器自動重新整理
程式停止用快捷鍵 ctrl+c
配置檔案寫法 fis-conf.js
fis.match(selector, props);
selector:fis3 把匹配檔案路徑的路徑作為selector,匹配到的檔案會分配給它設定的 props
props:編譯規則屬性,包括檔案屬性和外掛程式屬性,更多屬性
fis.media()配置多種狀態
比如:fis3 release rd push 到 rd 的遠端機器上
fis3 release qa push 到 qa 的遠端機器上
fis.media('prod').match('*.js', );
fis3 release prod 使用定義的prod方案
(2)資源定位
fis3 支援對html中的script、link、style、video、audio、embed等標籤的src或href屬性進行分析
js資源定位 __uri(path) 改變寫法:
原始碼:var js = __uri('demo.js');
編譯後var js = '/static/js/demo_33c5143.js';
css資源定位不改變寫法,但要使用url() src=''
fis編譯工具會識別css檔案或 html的style標籤內容 中 url(path) 以及 src=path 字段
原始碼:@import url('demo.css');
編譯後@import url('/demo_7defa41.css');
原始碼:.style
編譯後.style
(3)配置檔案的寫法
fis.match('*.', );
// 所有的 js
fis.match('**.js', );
// 所有的 css
fis.match('**.css', );
// 所有image目錄下的.png,.gif檔案
fis.match('/images/(*.)', );
(4)依賴宣告
預設只有js和css檔案會輸出到manifest.json表中
新增html依賴只需配置如下
// fis-conf.js
fis.match('*.html', );
html依賴宣告
css依賴宣告
/*** demo.css
* @require reset.css */
js依賴宣告
/*** @require demo.css
* @require list.js */
(5)內容嵌入
適合合併檔案,減少請求數
(5.1)在html中嵌入資源,給資源加 ?__inline
html中嵌入樣式檔案
html中嵌入指令碼資源
html中嵌入頁面檔案
(5.2)在js中嵌入資源 __inline()
在js中嵌入js檔案
__inline('demo.js');
console.log('demo.js content');
在js中嵌入base64
var img = __inline('images/logo.gif');
var img = 'data:image/gif;base64,r0lgodlhdggbalmaagbn6eyxlvvy9pnkyfo...jzna6853wjkc850npeoygaga7';
在js中嵌入其他文字檔案
var css = __inline('a.css');
var css = "body \n";
(5.3)在css中嵌入資源 ?__inline
在css檔案中嵌入其他css檔案
@import url('demo.css?__inline');
img ;
在css中嵌入的base64
.style
.style
fis3前端工程構建工具使用小結
1.安裝fis3環境 1.1 安裝nodejs環境 1.2 安裝fis3使用命令 npm install g fis3 1.3 檢測fis3是否安裝成功 fis3 v 2.在專案根目錄下新建配置檔案fis conf js3.在需要記錄檔案對映的地方新建map json 可選 map.json檔案內容...
自動化構建工具學習 fis3
fis3是什麼?fis3 是面向前端的工程構建工具。解決前端工程中效能優化 資源載入 非同步 同步 按需 預載入 依賴管理 合併 內嵌 模組化開發 自動化工具 開發規範 部署等問題。配置檔案 預設fis config.js 常用命令 fis3 release d 構建發布版本到 位址 fis3 in...
構建 fis3 使用教程(02)
前提回顧 前面一節 原創 fis3構建工具使用教程 01 中我們初步介紹了怎麼使用fis3進行構建,例如資源定位 雪碧圖 壓縮資源檔案等功能的使用,希望你還記得如何使用它們。如果你忘記了,可以回到該篇文章中鞏固一下,畢竟希望你能連續的看完這幾篇fis3教程。t t ok,在本篇中我們將介紹如何調式和...