Fis3的前端工程化之路 三大特性篇之資源定位

2021-09-07 08:31:50 字數 886 閱讀 3491

fis3版本:v3.4.22

資源定位：獲取任何開發中所使用資源的線上路徑

資源定位的能力讓我們不在關心資源部署到線上之後去了**，變成了什麼名字，這些都可以通過配置來指定。而工程師只需要使用相對路徑來定位自己的開發資源即可。

對html中的script、link、style、video、audio、embed等標籤的src或href屬性進行分析，一旦這些標籤的資源定位屬性可以命中已存在檔案，則把命中檔案的url路徑替換到屬性中，同時可保留原來url中的query查詢資訊。

編譯後:

會轉成絕對路徑

編譯後:

新增fis-conf.js檔案，fis3的命令

fis.match('**.gif', );
這裡通過release新增了虛擬目錄static，編譯後

使用編譯函式 __uri(path) 來定位資源

var img = __uri('images/logo.gif');
編譯後:

var img = '/images/logo_.gif';
識別css檔案或 html的style標籤內容 中 url(path) 以及 src=path 字段，並將其替換成對應資源的編譯後url路徑。

.style
編譯後；

.style
資源定位結果可以被fis的配置檔案控制，比如新增配置，調整檔案發布路徑。

基於FIS的前端工程化實現

2015.9.14 js css其他合併方式 1 nignx可以用combo拼接多個css js等，結構 2015.9.10 最近嘗試了下基於fis的前端工程化實現。等下再吐槽fis3 先列出要實現的功能 1 資源定位，自動匹配portal到cdn伺服器的路徑 2 資源合併，合併多個css js檔案...

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檔案內容...

前端工程化之路 初探 Sass 技術

對於 css 來說這門語言就如同是寫給設計者們的。語言本身是不需要編譯的。而且寫起來簡單明瞭，但是對於程式設計師來說沒有一種程式設計的感覺。對於一些重複冗餘的 無力提高編寫效率。現在推出了兩個工具 sass 和 less，決定嘗試一下，慢慢的適應用程式設計的方式來寫 css。因此寫了這篇入門的部落格...