使用 MD5 重命名文件

Question

正在 npm website and came across this package called gulp-rename-md5 浏览 gulp 个包裹。是否存在使用 MD5 重命名文件有用的场景？为什么？

Answer 1

其中一个优点是您可以将您的应用程序设置为长时间（例如 mystyle.a345fe.css）缓存名称中带有 MD5 和的文件，因为您知道该文件永远不会被删除修改的。这将为您节省一些流量，并且您的网络对于回访者来说会更快。

Answer 2

我使用了一个类似的缓存清除工具（称为 gulp-freeze，它将文件内容的 MD5 散列添加到文件名中）。

当您更新 CSS 或 JS 文件时，您希望用户在访问您的站点时获得该文件的最新版本。如果您的文件名为 "app.min.js" 并且您更新了它，他们的浏览器可能不会下载最新的文件。如果您使用的是 CDN，即使清除浏览器缓存也可能不会请求新文件。

我已经使用 gulp-freeze 和 gulp-filenames (to store the name of the cache busted file) and gulp-html-replace（实际更新 <link /> 或 <script /> 标签，并在 html).真的好用

代码示例

这将获取您的文件，使用 gulp-freeze 构建哈希，使用 gulp-filenames 存储该文件的名称，然后使用 [=16] 将其写入 html =].这是测试和工作

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 -->

使用 MD5 重命名文件

Renaming files with MD5

frontend

web

gulp