使用MD5重命名文件

时间:2016-03-02 15:50:54

标签: web gulp frontend

正在浏览npm网站上的gulp软件包,并遇到了名为gulp-rename-md5的这个软件包。是否存在使用MD5重命名文件有用的原因以及为什么?

2 个答案:

答案 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 />