{"id":293453,"date":"2019-08-07T07:05:03","date_gmt":"2019-08-07T14:05:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=293453"},"modified":"2019-08-07T07:05:03","modified_gmt":"2019-08-07T14:05:03","slug":"quick-gulp-cache-busting","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quick-gulp-cache-busting\/","title":{"rendered":"Quick Gulp Cache Busting"},"content":{"rendered":"

You should for sure be setting far-out cache headers<\/a> on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser “hang on to this file basically forever.” That way, when navigating from page to page on a site — or revisiting it, or refreshing the page — the browser doesn’t have to download it again which produces way faster page loads. It’s massively important for web performance, so do it!<\/p>\n

But how do you force the browser to get a fresh<\/em> version of the file? Well, there are a bunch of ways.<\/a> Check out that blog post for more. But here’s one that I’ve used just recently that I wanted to document.<\/p>\n

<\/p>\n

The trick is to change the query string<\/h3>\n

There was an era where the prevailing wisdom was that changing the query string wasn’t enough, but even then it, the reasons it wouldn’t work were pretty much edge cases. These days, changing the query string is fine (assuming you don’t change the default behavior, services like Cloudflare let you<\/a> do it).<\/p>\n

So, one day you ship it like this in your HTML:<\/p>\n

<link rel=\"stylesheet\" href=\"style.css?v=1\" \/><\/code><\/pre>\n
Then you change that query string to break the cache when you need to:<\/p>\n
<link rel=\"stylesheet\" href=\"style.css?v=2\" \/><\/code><\/pre>\n
The HTML, by the way, is either not cached or cached for a much shorter amount of time, so changes to HTML will be seen.<\/p>\n
I sometimes do it by hand<\/h3>\n
For many years, I busted cache on this very site by setting a PHP variable and using it to break assets, like…<\/p>\n
<?php $ver = 1.0; ?>\r\n\r\n<link rel=\"stylesheet\" href=\"style.css?v=<?php echo $ver; ?>\" \/>\r\n<link rel=\"stylesheet\" href=\"some-other-asset.css?v=<?php echo $ver; ?>\" \/><\/code><\/pre>\n
Hey that works, but it was me hand-manipulating that variable. I would sometimes forget to do it, and even if I did remember, I sort of resented having to do it.<\/p>\n
Automating version busting with Gulp<\/h3>\n
I’m using a Gulp-powered build process at the moment on this site, which does all the classic stuff: Sass, Babel, file concatenation, live reloading… <\/p>\n
It occurred to me I might as well have Gulp do the query-string changing whenever changes are made to CSS or JavaScript. JavaScript has a .replace()<\/code> method, and that’s available in Node\/Gulp easily with the gulp-replace<\/a> plugin. <\/p>\n
I make a task. When I call it, it looks in my header filer for the string cache_bust=<\/code> plus some value, and replaces it with a new randomized string based on the date and time.<\/p>\n
gulp.task(\"cache-bust-css\", function() {\r\n  var cbString = new Date().getTime();\r\n  return gulp\r\n    .src([\"header.php\"])\r\n    .pipe(\r\n      replace(\/cache_bust=\\d+\/g, function() {\r\n        return \"cache_bust=\" + cbString;\r\n      })\r\n    )\r\n    .pipe(gulp.dest(\".\"));\r\n});<\/code><\/pre>\n
I do the same thing in a separate task when JavaScript files are editing and compiled.<\/p>\n
It’s still a little dumb<\/h3>\n
Notice that I’m changing the query string on all<\/em> the CSS assets every time any<\/em> of them changes. That’s not as efficient as it could be. I should probably be changing the query string only on the changed files. <\/p>\n
I’ll get to it eventually. Sometimes you just gotta baby-step your way to better solutions over time. <\/p>\n
\n
This is just one way! There are other Gulp plugins just for this. Other build systems have different approaches. This approached happened to work well for me and my exact needs at the time. Feel free to share your strategy!<\/p>\n","protected":false},"excerpt":{"rendered":"
You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts […]<\/p>\n","protected":false},"author":3,"featured_media":293786,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[911,841],"class_list":["post-293453","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-cache","tag-gulp"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/gulp-dynamite.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":206274,"url":"https:\/\/css-tricks.com\/strategies-for-cache-busting-css\/","url_meta":{"origin":293453,"position":0},"title":"Strategies for Cache-Busting CSS","author":"Chris Coyier","date":"August 14, 2015","format":false,"excerpt":"Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS file for a given amount of time. It's a best-practice that many if not most sites are doing already. Hand-in-hand\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245524,"url":"https:\/\/css-tricks.com\/hashes-in-wordpress-assets-with-enqueue\/","url_meta":{"origin":293453,"position":1},"title":"Using Dynamic Hashes in File Names with WordPress’ Enqueue Function","author":"Pascal Klau (@pascalaoms)","date":"September 14, 2016","format":false,"excerpt":"The following is a guest post by Pascal Klau, a self-described trainee web developer from Germany working with WordPress, Gulp, and more recently VueJS and Webpack. During my journey of learning web technology, I stumbled upon the importance of file caching. It's a pretty important thing for web page performance.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":299795,"url":"https:\/\/css-tricks.com\/just-sharing-my-gulpfile\/","url_meta":{"origin":293453,"position":2},"title":"Just Sharing My Gulpfile","author":"Chris Coyier","date":"December 11, 2019","format":false,"excerpt":"Seemingly out of the blue, the Gulp processing I had set up for this site started to have a race condition. I'd run my watch command, change some CSS, and the processing would sometimes leave behind some extra files that were meant to be cleaned up during the processing. Like\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/gulp-blog-header.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":207144,"url":"https:\/\/css-tricks.com\/gulp-for-beginners\/","url_meta":{"origin":293453,"position":3},"title":"Gulp for Beginners","author":"Zell Liew","date":"September 1, 2015","format":false,"excerpt":"Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front-end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets like CSS, JavaScript,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323456,"url":"https:\/\/css-tricks.com\/a-primer-on-the-different-types-of-browser-storage\/","url_meta":{"origin":293453,"position":4},"title":"A Primer on the Different Types of Browser Storage","author":"Ido Shamun","date":"October 21, 2020","format":false,"excerpt":"In back-end development, storage is a common part of the job. Application data is stored in databases, files in object storage, transient data in caches\u2026 there are seemingly endless possibilities for storing any sort of data. But data storage isn\u2019t limited only to the back end. The front end (the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/kv-storage-devtools-source.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":337113,"url":"https:\/\/css-tricks.com\/wordpress-caching-all-you-need-to-know\/","url_meta":{"origin":293453,"position":5},"title":"WordPress Caching: All You Need To Know","author":"Chris Coyier","date":"April 1, 2021","format":false,"excerpt":"Here's Ashley Rich at Delicious Brains writing about all the layers of caching that are relevant to a WordPress site. I think we all know that caching is complicated, but jeez, it's a journey to understand all the caches at work here. The point of cache being speed and reducing\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/4C07BF8E-841B-4FBD-A8CF-BF65C0E23B4D.jpeg?fit=1200%2C686&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=293453"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293453\/revisions"}],"predecessor-version":[{"id":293785,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293453\/revisions\/293785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/293786"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=293453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=293453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}