構建工具fis3的使用

2021-08-04 05:55:38 字數 2357 閱讀 1928

(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,在本篇中我們將介紹如何調式和...