成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端靜態(tài)資源版本更新與緩存之——通過gulp 在原h(huán)tml文件上自動化添加js、css版本號

suosuopuo / 789人閱讀

摘要：原理修改和文件通過對文件內(nèi)容進(jìn)行運(yùn)算，生成一個文件的唯一字符串如果文件修改則號會發(fā)生變化替換中的文件名，生成一個帶版本號的文件名方案現(xiàn)在網(wǎng)上的方案都是生成一個新的目錄，里面包含了要發(fā)布的等文件。

原理

修改js和css文件

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

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

方案

現(xiàn)在網(wǎng)上的方案都是生成一個新的dist目錄，里面包含了要發(fā)布的html,js,css等文件。但是在實(shí)際的公司的項(xiàng)目中，會有情況不能生成新的HTML進(jìn)行發(fā)布，需要在原來的HTML文件上進(jìn)行js ,css版本的替換. 這里分享下我在實(shí)際項(xiàng)目中通過改動插件然后在原目錄結(jié)構(gòu)下進(jìn)行版本的控制方案。

原h(huán)tml文件代碼

預(yù)期效果：在原目錄結(jié)構(gòu)下html文件代碼

1：安裝gulp和gulp插件
執(zhí)行：

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"));
});


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


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

執(zhí)行g(shù)ulp命令后的效果

//rev目錄下生成了manifest.json對應(yīng)文件
{
  "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) ) {

再執(zhí)行g(shù)ulp命令，得到的結(jié)果如下(效果正確):

但是假如我們更改了css和js后，再執(zhí)行g(shù)ulp命令，得到的結(jié)果會如下:

有沒有發(fā)現(xiàn)，會在版本號后面再添加一個版本號，因?yàn)間ulp只替換了原來文件名，這樣又不符合預(yù)期效果了，所以我們想到，還需要修改插件的替換正則表達(dá)式。

4.繼續(xù)更改gulp-rev-collector

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

現(xiàn)在你不管執(zhí)行多少遍gulp命令，得到的html效果都是

附上改過后的node_modules文件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90906.html

相關(guān)文章

  • 提高前端性能的黃金法則

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

    keithyau 評論0 收藏0

  • 前端靜態(tài)資源緩存最優(yōu)解以及max-age的陷阱

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

    FrozenMap 評論0 收藏0

  • 在 Laravel 項(xiàng)目中使用 Glup 之 Laravel-Elixir

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

    ralap 評論0 收藏0

  • Webpack 愛與恨

    摘要：關(guān)于標(biāo)題，為什么是愛與恨因?yàn)樵趧偝鰜淼臅r候，我并不是堅(jiān)定的支持者，有很多地方用起來不方便，設(shè)計(jì)不合理。用戶只有首次訪問需要下載全部靜態(tài)資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當(dāng)為時，則開啟服務(wù)。例如請求的是則返回中的數(shù)據(jù)。 關(guān)于標(biāo)題，為什么是愛與恨？ 因?yàn)樵?webpack 剛出來的時候，我并不是堅(jiān)定的支持者，有很多地方用起來不方便，api 設(shè)計(jì)不合理。隨著 webpa...

    HmyBmny 評論0 收藏0

  • [譯] 如何運(yùn)用新技術(shù)提升網(wǎng)頁速度和性能

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

    zhoutk 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<