正在浏览npm网站上的gulp软件包,并遇到了名为gulp-rename-md5的这个软件包。是否存在使用MD5重命名文件有用的原因以及为什么?
答案 0 :(得分:1)
其中一个优点是,您可以将应用程序设置为在其名称(例如mystyle.a345fe.css)中长时间(几个月)缓存MD5总和的文件,因为您知道此文件永远不会被修改。这将为您节省一些流量,并且您的网络将更快地回访访问者。
答案 1 :(得分:1)
我使用了类似的缓存清除工具(称为gulp-freeze,它将文件内容的MD5哈希添加到文件名中)。
更新CSS或JS文件时,您希望用户在访问您的网站时获取该文件的最新版本。如果您的文件名为" app.min.js"并且您更新它,他们的浏览器可能不会下拉最新的文件。如果您正在使用CDN,即使清除浏览器缓存,也可能无法请求新文件。
我已使用gulp-freeze和gulp-filenames(用于存储缓存已删除文件的名称)和gulp-html-replace(以实际更新<link />
或{{1} }标签,在html中具有此缓存已被破坏的文件的名称)。它真的很方便。
代码示例
这将获取您的文件,使用<script />
构建哈希,使用gulp-freeze
存储该文件的名称,然后使用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 />