Renaming files with MD5

Question

Was going through gulp packages on the npm website and came across this package called gulp-rename-md5. Is there a scenario where renaming a file using MD5 is useful and why?

Answer 1

I've used a similar tool for cache busting (called gulp-freeze which adds an MD5 hash of the file contents to the filename).

When you update a CSS or JS file you want users to get the latest version of that file when they visit your site. If your file is named "app.min.js" and you update it, their browsers might not pull down the latest file. If you're using a CDN even clearing the browser cache probably won't request the new file.

I've used gulp-freeze with gulp-filenames (to store the name of the cache busted file) and gulp-html-replace (to actually update the <link /> or <script /> tags with the name of this cache busted file in the html). It's really handy.

CODE SAMPLE

This will get your files, use gulp-freeze to build the hash, use gulp-filenames to store the name of that file, then write that to the html with gulp-html-replace. This is tested and working

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("./"));
});

EDIT I should add that index.html just needs these comments so gulp-html-replace knows where to write the <script /> element

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