Fis3版本:v3.4.22

Fis3的三大特性

---

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

內容嵌入：把一個文件的內容(文本)或者base64編碼(圖片)嵌入到另一個文件中

依賴聲明：在一個文本文件內標記對其他資源的依賴關系

資源定位

---

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

html中資源定位

---

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

img資源定位

<img title="百度logo" src="images/logo.gif"/>

編譯后:

<img title="百度logo" src="/images/logo.gif"/>

會轉成絕對路徑

link資源定位

<link rel="stylesheet" type="text/css" href="demo.css">

編譯后:

<link rel="stylesheet" type="text/css" href="/demo.css">

給資源添加虛擬目錄

<img title="百度logo" src="images/logo.gif"/>

添加fis-conf.js文件，fis3的命令

fis.match('**.gif', {//發(fā)布到/static/img/xxx目錄下release : '/static/img$0' });

這里通過release添加了虛擬目錄static，編譯后

<img title="百度logo" src="/static/img/logo_74e5229.gif"/>

js定位資源

---

使用編譯函數(shù) __uri(path) 來定位資源

var img = __uri('images/logo.gif');

編譯后:

var img = '/images/logo_.gif';

css定位資源

---

識別css文件或 html的style標簽內容 中 url(path) 以及 src=path 字段，并將其替換成對應資源的編譯后url路徑。

.style {background: url('images/body-bg.png');}

編譯后；

.style {background: url('/images/body-bg.png');}

最后

---

資源定位結果可以被Fis的配置文件控制，比如添加配置，調整文件發(fā)布路徑。

總結

以上是生活随笔為你收集整理的Fis3的前端工程化之路[三大特性篇之资源定位]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。