Gulp cache busting

Kim Massaro

Not long ago I had the problem with caching images and CSS in one of the applications I’m working on. I was familiar with the fact that you can set an expiration date on assets, however I wasn’t sure how and what would happen if I would make a change in the files. After a little Googling I came across cache-busting.

Google developers explained cache-busting as:

For resources that change occasionally, you can have the browser cache the resource until it changes on the server, at which point the server tells the browser that a new version is available. You accomplish this by embedding a fingerprint of the resource in its URL (i.e. the file path). When the resource changes, so does its fingerprint, and in turn, so does its URL. As soon as the URL changes, the browser is forced to re-fetch the resource. Fingerprinting allows you to set expiry dates long into the future even for resources that change more frequently.

I came across 3 ways of using it in Gulp:
Gulp-buster (which is out of date)
Gulp cache-buster
Gulp cache-bust

I’ve implemented the last one which helped me a lot and would like to recommend you to have a look at it. Keep in mind though, if you don’t set it up properly, than there is a big chance you get broken pages. Otherwise, it can optimise your application.


you might also like