前端靜態資源版本更新與緩存之——通過gulp 在原html文件上自動化添加js、css版本號

suosuopuo 發布于2019-08-22 10:36 / 776人閱讀

摘要：原理修改和文件通過對文件內容進行運算，生成一個文件的唯一字符串如果文件修改則號會發生變化替換中的文件名，生成一個帶版本號的文件名方案現在網上的方案都是生成一個新的目錄，里面包含了要發布的等文件。

原理

修改js和css文件

通過對js,css文件內容進行hash運算，生成一個文件的唯一hash字符串(如果文件修改則hash號會發生變化)

替換html中的js,css文件名，生成一個帶版本號的文件名

方案

現在網上的方案都是生成一個新的dist目錄，里面包含了要發布的html,js,css等文件。但是在實際的公司的項目中，會有情況不能生成新的HTML進行發布，需要在原來的HTML文件上進行js ,css版本的替換. 這里分享下我在實際項目中通過改動插件然后在原目錄結構下進行版本的控制方案。

原html文件代碼

預期效果：在原目錄結構下html文件代碼

1：安裝gulp和gulp插件
執行：

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence

2：編寫gulpfile.js


//引入gulp和gulp插件
var gulp = require("gulp"),
    runSequence = require("run-sequence"),
    rev = require("gulp-rev"),
    revCollector = require("gulp-rev-collector");

//定義css、js源文件路徑
var cssSrc = "css/*.css",
    jsSrc = "js/*.js";


//CSS生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task("revCss", function(){
    return gulp.src(cssSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest("rev/css"));
});


//js生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task("revJs", function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest("rev/js"));
});


//Html替換css、js文件版本
gulp.task("revHtml", function () {
    return gulp.src(["rev/**/*.json", "View/*.html"])
        .pipe(revCollector())
        .pipe(gulp.dest("View"));
});


//開發構建
gulp.task("dev", function (done) {
    condition = false;
    runSequence(
        ["revCss"],
        ["revJs"],
        ["revHtml"],
        done);
});


gulp.task("default", ["dev"]);

執行gulp命令后的效果

//rev目錄下生成了manifest.json對應文件
{
  "default.css": "default-803a7fe4ae.css"
}

很顯然這不是我們需要的效果

3.更改gulp-rev和gulp-rev-collector

打開node_modulesgulp-revindex.js
第144行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + "?v=" + file.revHash;

打開nodemodulesgulp-rev
odemodules
ev-pathindex.js
10行 return filename + "-" + hash + ext;
更新為: return filename + ext;

打開node_modulesgulp-rev-collectorindex.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), "" ) !==  path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split("?")[0] !== path.basename(key) ) {

再執行gulp命令，得到的結果如下(效果正確):

但是假如我們更改了css和js后，再執行gulp命令，得到的結果會如下:

有沒有發現，會在版本號后面再添加一個版本號，因為gulp只替換了原來文件名，這樣又不符合預期效果了，所以我們想到，還需要修改插件的替換正則表達式。

4.繼續更改gulp-rev-collector

打開node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( "([/""])" + pattern, "g" ),
更新為: regexp: new RegExp( "([/""])" + pattern+"(?v=w{10})?", "g" ),

現在你不管執行多少遍gulp命令，得到的html效果都是

附上改過后的node_modules文件

云服務器 GPU云服務器 gulp添加版本號版本名稱版本號版本更新版本號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90906.html

提高前端性能的黃金法則

摘要：雖然如此，但是網站前端性能優化的思路基本沒變。為什么前端性能如此重要數據顯示只有的最終用戶響應時間花在了下載文檔上。前端性能優化一味奉行最佳實踐有時候反而過而不及，所以針對項目的實際情況來優化才是明智的選擇。前端近幾年變化很大，各種工具，庫，框架并發。雖然如此，但是網站前端性能優化的思路基本沒變。為什么前端性能如此重要？數據顯示: 只有 10%~20% 的最終用戶響應時間花在了下載...

keithyau 2019-08-19 17:54 評論0 收藏0
前端靜態資源緩存最優解以及max-age的陷阱

摘要：前端靜態資源緩存最優解以及的陷阱合理的使用緩存可以極大地提高網站的性能優勢，還可以節約帶寬從而降低服務器成本。此處注意和與第一天請求的版本號不同。既支持版本號類型的靜態資源緩存方式也支持服務器重新認證的方式。前端靜態資源緩存最優解以及max-age的陷阱合理的使用緩存可以極大地提高網站的性能優勢，還可以節約帶寬從而降低服務器成本。但是很多站點有只弄對了一半或者一半都沒有，如果是這樣...

FrozenMap 2019-08-06 13:30 評論0 收藏0
在 Laravel 項目中使用 Glup 之 Laravel-Elixir

摘要：結果會被存放到拷貝文件目錄你可以使用方法拷貝文件目錄到新路徑，所有操作都相對于項目根目錄版本號緩存刷新很多開發者會給編譯的前端資源添加時間戳或者唯一令牌后綴以強制瀏覽器加載最新版本而不是代碼的緩存副本。環境準備 1、安裝 nodejs 和 npm ?如果你使用的是 Laravel 的 Homestead 環境，可以不用安裝了，已自帶。 ?我們來查看下它們的版本： $ node -v ...

ralap 2019-06-27 12:13 評論0 收藏0
Webpack 愛與恨

摘要：關于標題，為什么是愛與恨因為在剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，設計不合理。用戶只有首次訪問需要下載全部靜態資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當為時，則開啟服務。例如請求的是則返回中的數據。關于標題，為什么是愛與恨？因為在 webpack 剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，api 設計不合理。隨著 webpa...

HmyBmny 2019-08-20 16:47 評論0 收藏0
[譯] 如何運用新技術提升網頁速度和性能

摘要：簡言之，我們認為好的用戶體驗從快速的內容傳輸開始，也就意味著性能美觀。每一步我們都在探討如何在獲得好的用戶體驗和保證設計美感的同時，最小化對性能的影響。字型子集設定到目前為止，子集設定是改善網頁字體性能最快的方式。作者 Declan 原文鏈接最近更新了我們的網站，它是經過了設計上的全面驗收的。但實際上，作為軟件開發者，我們會注重很多技術相關的零碎的東西。我們的目標是控制性能，注重性...

he_xd 2019-08-21 14:21 評論0 收藏0