使用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）。这将为您节省一些流量，并且您的网络对于回访者而言将更快。