CODEWITHSUNDEEP
javascriptgulpbuild-process
Mark
Mark

Reputation: 57

How to cache-bust new app builds with Gulp?

I am using Gulp to build a deployable build for an application. I would like to cache-bust all of my .js and .css files so that when a new build is deployed, users will need to retrieve the new "cache-busted" files. For example, if an app.js file is stored in the browser's cache, I would like to have the ref to app.js in my index.html look something like this:

<script src="app/js/app.js?v=1.2"></script>

and so on for all relevant files I would like to cache bust.

Some other questions related to this problem I have:

1) How can I tell that these files are actually getting cache busted properly?

2) Is there a better way to approach this?

Here is what I am trying so far:

//compile index.html, app, vendor
gulp.task('compile-dist', function(){

    var revAll = new RevAll();

    gulp.src('../../backend-angular-seed/app/**')
    .pipe(gulp.dest('../dist/app'));


    gulp.src('../../backend-angular-seed/vendor/**')
    .pipe(gulp.dest('../dist/vendor'));

    gulp.src('../index.html')
    .pipe(gulp.dest('../dist/'));

})

This code takes all of the code from my app/ directory (which is a result of my compiled code from my master/ directory) and builds a dist/ directory with all of my js, css, and vendor files.

After this build I have a dist/ directory that looks like this:

/dist
 /css
  |_app.css
 /img
 /js
  |_ app.js
  |_ base.js 
 /vendor

 index.html

I have tried using a few different methods on modifying this dist directory to effectively have it bust the cache. I tried using gulp-cachebust as well as gulp-rev-all, but I believe both of these tools are a bit overkill for what I am trying to do.

Ideally, through Gulp, I would like to go into the index.html file made from the Gulp build, and modify all of my script tags to append the query string of "?v=1.0" on the end of all files I would like to cache bust per deploy build.

Any answers/suggestions would be greatly appreciated. Thanks so much!!!

Upvotes: 3

Views: 2731

Answers (1)

user5265656
user5265656

Reputation: 19

If appending query string is all you want then i recommend using gulp-cache-bust.

var cachebust = require('gulp-cache-bust');

gulp.src('./dist/index.html')
  .pipe(cachebust({
    type: 'timestamp'
  }))
.pipe(gulp.dest('./dist'));

Here is the turorial for it: https://www.npmjs.com/package/gulp-cache-bust

Upvotes: 1

Related Questions