web - 使用 MD5 重命名文件

Question

正在查看 npm 上的 gulp 包网站并发现了这个名为 gulp-rename-md5 的包。是否存在使用 MD5 重命名文件有用的场景以及为什么？

Answer 1

我使用了类似的缓存清除工具(称为 gulp-freeze ，它将文件内容的 MD5 哈希值添加到文件名中)。

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

我使用了 gulp-freeze gulp-filenames (存储缓存无效文件的名称)和 gulp-html-replace (实际更新 <link /> 或 <script /> 标签与 html 中此缓存无效文件的名称)。真的很方便。

代码示例

这将获取您的文件，使用 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 />元素

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