gulp: Automatically add version number to request for preventing browser cache

I deploy my project by building source files with gulp right on the server. To prevent caching issues, the best practice could be adding a unique number to request url, see: Preventing browser caching on web application upgrades;

In npm repositories, I couldn’t find a tool for automatically adding version number to request. I’m asking if someone has invented such tool before.

  • Can't get external library with browserify and debowerify
  • Node.js: how do I pass global variable into a file being inserted through require()?
  • gulp-sass @import CSS file
  • How to gulp build index.html reference assets with absolute paths?
  • Exclude sub-directory in gulp.watch
  • npm overhead - how to handle this?
  • Possible implementation could be the following:

    I have a file index.html in src/ folder, with following script tag

     <script src="js/app.js<!-- %nocache% -->"></script>
    

    During build it is copied to dist/ folder, and comment is replaced by autoincrement number

     <script src="js/app.js?t=1234"></script>
    

  • Update: Errors with postCSS and Babel in Gulpfile
  • Browserify and Babel gulp tasks
  • Gulp uglify fails with js parse error
  • Gulp synchronous task issue
  • ENFILE: file table overflow with Karma
  • Gulp Watch not working
  • 3 Solutions collect form web for “gulp: Automatically add version number to request for preventing browser cache”

    You can use gulp-version-number for this. It can add version numbers to linked scripts, stylesheets, and other files in you HTML documents, by appending an argument to the URLs. For example:

    <link rel="stylesheet" href="main.css">
    

    becomes:

    <link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">
    

    You don’t even have to specify a placeholder, like you showed in your example implementation. And it’s configurable.

    Example usage:

    const $ = gulpLoadPlugins();
    const versionConfig = {
      'value': '%MDS%',
      'append': {
        'key': 'v',
        'to': ['css', 'js'],
      },
    };
    
    gulp.task('html', () => {
      return gulp.src('src/**/*.html')
        .pipe($.htmlmin({collapseWhitespace: true}))
        .pipe($.versionNumber(versionConfig))
        .pipe(gulp.dest('docroot'));
    });
    

    It looks like you may have quite a few options.

    https://www.npmjs.com/package/gulp-cachebust
    https://www.npmjs.com/package/gulp-buster

    Hope this helps.

    You can use the gulp-rev module. This will append a version number to the files, the version is a hash of the file content, so it will only change if the file changes.

    You then output a manifest file containing the mapping between the file e.g. Scripts.js to Scripts-8wrefhn.js.

    Then use a helper function when returning the page content to map the correct values.

    I have used the above process. However there’s another module gulp-rev-all which is an forked extension of gulp-rev which does a little more, e.g. automatic updating of file references in pages.

    Documentation here: