Web前端構建工具版本號管理方案思考

2022-09-21 19:39:08 字數 1350 閱讀 9767

前端構建工具滿天飛的情景下,筆者也忍不住去搗鼓了一下,真正體驗一下nodejs帶來的魅力,經過一段時間規劃設計,終於將平台工具搗鼓出來了。在裡面也體驗了express, socket.io, grunt等node外掛程式服務,使用很流暢,並且很好的完了我的基本需求(js\css\image的壓縮和自動部署功能)。

雖然基本功能完成,但是還有乙個讓人容易忽略而又重要的問題來了,就是資源檔案的版本號的問題。在這裡用的是seajs來做的模組管理,也在網上蒐集了一程式設計客棧下關於這塊的資料。大致有以下兩種方案:

1、  配置seajs的map物件。很方便,集中管理,但是也存在一些問題,比如:map物件的維護、配置檔案引用頁面的時間戳問題。

2、  生成檔案sign,替換原有檔案的名。這裡www.cppcns.com不用考慮頁面引用的時間戳問題,但是需要對資源及頁面做一次全文查詢替換,這對於分散部署的情況下將會非常複雜。

看了上面兩種方案後,感覺在我的場景下還存在一些不足之處。筆者想要的是不影響開發情況下,開發人員完全不用考慮檔案被快取問題,只需完成編碼,提交到構建系統後,一鍵完成構建和部署。

確定好目標後,既然不想讓開發同學關心時間戳問題,那麼是否可以將這個工作交給web伺服器來做呢?那麼交給伺服器來做之後,如何動態的更新最新的資源檔案呢?

有問題就好解決,將問題丟擲來之後,方案也漸進呈現出來,不囉嗦了,直接上筆者的實現方案:

構建工具動態生成.htaccess檔案,將構建的資源檔案的url重寫列表同步到.htaccess檔案中以達到由伺服器動態獲取新的資源檔案。

(備註:筆者是在apache環境下,對iis\nginx\tomcat\resin\jboss等環境還需要再研究研究。)

看了上面的方案是不是很簡單,那具體是怎麼做的呢?筆者也在這裡列一下。

1. 構程式設計客棧建工具在構的時候生成乙個與filename.ext對應的filename.ext.sha1的檔案,這個.sha1的檔案存放filename.ext檔案的sha1值。

2. 在構建完成後,構建工具讀取.htaccess的模板,並且遍歷得到所有資源檔案的列表,生成乙個對filename.ext對應的filename.ext.sign的檔案。

3. 按規則生成rewritecond和rewriterule。並將規則資料寫到.htaccess檔案中並部署到資源檔案站點的根據目錄。

圖一:構建工具基本結構圖

圖二:構建後的檔案www.cppcns.com列表

圖三:生成一條rule

圖四:生成後的.htaccess檔案

ok,到這裡基本告一段落了,www.cppcns.com資源版本號解決了。但是對於效能影響這塊還需要觀察,待有時間再研究。

github位址:

本文標題: web前端構建工具版本號管理方案思考

本文位址:

Web前端構建工具版本號管理方案思考

前端構建工具滿天飛的情景下,筆者也忍不住去搗鼓了一下,真正體驗一下nodejs帶來的魅力,經過一段時間規劃設計,終於將平台工具搗鼓出來了。在裡面也體驗了express,socket.io,grunt等node外掛程式服務,使用很流暢,並且很好的完了我的基本需求 js css image的壓縮和自動部...

前端構建工具

一 什麼是 自動化 構建工具 構建工具是一種自動化工具。一般專案都有較多的檔案,為開發維護方便拆分單個的模組,在發布的時候,對拆分後的各模組進行合併,壓縮等,構建工具可以幫完成這些重複的工作。二 什麼是包管理工具 可以安裝 解除安裝 更新 檢視 搜尋 發布等功能。類似grunt,gulp構建工具,和...

前端構建工具

devdependencies gulp強調的是前端開發的工作流程,側重於前端開發的整個過程的控制管理 像是流水線 我們可以通過配置一系列的task,定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順序,來讓gulp執行這些task,從而構建專案的整個前端...