h5學習筆記 使用fis的前端構建工具記錄

2021-08-13 16:37:05 字數 2384 閱讀 8596

檢視了一下這個工具,有乙個地方做得比較好一點,資源定位。fis採取的方案是採取了絕地定位方案,但它還有乙個比較強大一點功能。資源位置可以隨意修改和調整,這一點比較有意思,配套還有一些發布版本的功能,壓縮等等。但由於專案不大,採用這個功能也可以滿足到一些開發。下面記錄一下使用過程。

npm 進行全域性安裝。(前提是安裝好nodejs的環境

npm install -g fis3
由於官方demo目錄結構有點鬆散,於是,修改了一下他的目錄結構。

新增css、js、images等常規目錄。

在開發目錄,新增乙個對應的檔案fis-conf.js,這個配置檔案新增上目錄。fis指令碼會對這個配置檔案進行解析工作。

由於滿足自身的專案目錄,所以在發布版本的時候,將所有的資源放置在static下。發布會的目錄會根據指令碼調整。

fis.

match('*.', );

//所有的css檔案

fis.

match('**.css', );

fis.

match('/js/(*.js)',);

//所有image目錄下的.png,.gif,jpg檔案

fis.

match('/images/(*.)', );

//測試目錄

fis.media('qa').

match('*', )

});fis.

match('*', )

})

在使用過程遇到乙個小坑,to的位置,當初的時候,遇到乙個疑惑,文件是採用linux 的路徑描述,沒有新增window系統,嘗試一下猜測。將發布的目錄路徑指定到本地的機器xampp的伺服器的htdocs\fis3的目錄下,fis3是自定義的目錄。

'e:/weixin/php2/htdocs/fis3'
這裡還遇到乙個小問題,就是資源重定位。release 發布的是相對的目錄,需要新增url路徑後,資源訪問才能正常。fis提供了這個配置機制。 新增url的目錄。

release : '/static$0',

url: '/fis3/static$0' //伺服器資源的位置

例如,本地的window目錄是e:/weixin/php2/htdocs/fis3,如果遷移了其他目錄後,也可以重新調整指令碼進行發布。

fis 提供了乙個php指令碼**可以將測試**發布測試目錄。這裡有安全性問題,所以那個指令碼猜測可以用於區域網使用和正式伺服器。由於他的機制是採用http傳送請求將資源遷移到對應的目錄。(提供的版本有php 和nodejs版本)

需要將指令碼放置在伺服器根目錄下。

<?php 

// !!!! 注意 !!!!

// 此**存在很大的安全隱患,請不要部署到線上服務。

使用

fis3 release qa  //發布到qa 測試目錄
fis3 release // 發布到本地伺服器目錄
完成後,資源在發布後就能被訪問到了。開啟谷歌瀏覽器開發模式f12,可以看到資源的目錄已經被修改名字了。

由於**和配置針對個人專案,所以這樣發布,檔案的快取問題應該可以解決到。

fis 還有很多功能還沒體驗到,像壓縮那些,目前來講,可以滿足到自身當前的專案開發,這一點足夠了。

相對webpack 這種單頁開發,webpack使用複雜度會較高一點。js的開發,確實是需要配套這些工作環境才能開發,這也是js開發難處。東西和框架有點多容易被動接受。

隨著js發布各種版本和工具誕生,前端學習還是乙個大坑,相比後端而言,穩定性前端變化讓人跟得太累了。

前端H5初學筆記(四)

boder的可選值 none,預設值,無邊框 solid,實線 dotted,點狀邊框 dashed,虛線 double,雙線 margin還可以設定為auto,auto一般只設定給水平方向的margin 如果只指定,左外邊距或右外邊距的margin位auto則會將外邊距設定為最大值。垂直方向外邊距...

H5 學習筆記3

html標籤 表單 input標籤 屬性 type text文字框 password密碼框 radio單選框 checkbox多選框 button按鈕 reset重置 submit提交 select標籤 屬性 option 下來框 textarea標籤 文字域 button標籤 作用範圍比較廣 fo...

H5學習筆記(六)

1 複雜選擇器 1 兄弟選擇器 兄弟 具備相同父元素的一組元素稱為兄弟元素 1 相鄰兄弟選擇器 1 什麼是相鄰兄弟選擇器 匹配指定元素的相鄰兄弟元素 2 語法 結合符 選擇器1 選擇器2 2 通用兄弟選擇器 1 什麼是通用兄弟選擇器 匹配指定元素下面所有的兄弟選擇器的元素 2 語法 結合符 選擇器1...