使用MD5重命名文件

Question

正在瀏覽npm網站上的gulp軟件包，並遇到此軟件包gulp-rename-md5。是否有使用MD5重命名文件的方案很有用，爲什麼？

Answer 1

我使用了一個類似的緩存清除工具（稱爲gulp-freeze，它將文件內容的MD5哈希添加到文件名中）。

更新CSS或JS文件時，您希望用戶在訪問您的網站時獲取該文件的最新版本。如果您的文件被命名爲「app.min.js」並且您更新了它們，那麼他們的瀏覽器可能無法下載最新的文件。如果您使用CDN，即使清除瀏覽器緩存可能也不會請求新文件。

我用一口凍結與gulp-filenames（存儲緩存破獲文件名）和gulp-html-replace（實際上這個緩存的名稱更新<link />或<script />標籤破獲文件中的HTML）。這真的很方便。

代碼示例

這將讓你的文件，使用gulp-freeze構建hash，用gulp-filenames來存儲文件的名稱，然後寫的HTML與gulp-html-replace。這是測試和工作

var gulp = require("gulp"), 
    runSequence = require("run-sequence"), 
    $ = require("gulp-load-plugins")(); 

gulp.task("build",() => { 
    runSequence("js", "write-to-view"); 
}); 

gulp.task("js",() => { 
    return gulp 
     .src("./js/**/*.js") 
     .pipe($.freeze()) 
     .pipe($.filenames("my-javascript")) 
     .pipe(gulp.dest("./")); 
}); 

gulp.task("write-to-view",() => { 
    return gulp 
     .src("index.html") 
     .pipe(
      $.htmlReplace(
       { 
        js: $.filenames.get("my-javascript") 
       }, 
       { keepBlockTags: true } 
      ) 
     ) 
     .pipe(gulp.dest("./")); 
}); 

編輯 我要補充一點，index.html只需要這些意見，以便gulp-html-replace知道哪裏來的<script />元素

<!--build:js--> 
<!-- endbuild --> 

Answer 2

其中一個好處是，你可以設置你的應用程序緩存文件在他們的名字很長一段時間（幾個月），因爲你知道，這個文件將永遠不會被修改的MD5校驗和（例如mystyle.a345fe.css）。這將爲您節省一些流量，並且您的網絡對於回訪者而言將更快。