1

We are cache busting files with a timestamp, also for our .css files. But when we are busting the css cache, will the cached background-images also be forced to reload?

Do we need to add a timestamp to the background-image: url(); as well? If so, is there a way to do this with grunt? So far, all I could discover where ways to add timestamps to files, but not in the css files themselves.

Nachtfunke
  • 329
  • 1
  • 14

1 Answers1

0

Versioning the CSS files are unfortunately not good enough for Cache busting assets, this would force the browser to fetch the new CSS file itself from the server. But since the browser caches your CSS files and your images as separate items, you will need to bust the images/sprites as well separately.

When the image follows ? background-image: url(../img/some-sprite.png?version=20130205), the browser is forced to make a new request. This is important to notice that it DOES make a new request if the ? is found.

If you do have some special interest towards it - Read this article to get to know more about Cache busting in LESS

https://www.bennadel.com/blog/2643-cache-busting-css-images-with-less-css.htm

For Cache busting with only Gulp & not editing your SASS follow this

You could also use numerous npm packages like gulp-cache-buster etc.

If you want cache busting in your SASS you could follow this

Community
  • 1
  • 1
Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44
  • This is what I use now though this is specific for compiling CSS from LESS. It works now, but we are currently moving from LESS to SASS and thus we were trying to find a solution that works with grunt or gulp independently. – Nachtfunke Nov 09 '16 at 10:57