Rolling out CSS/JavaScript changes with heavy browser caching

Most of us have been in this scenario. We have spent hours tweaking our Joomla site using numerous tools like Google Page Speed, YSlow and made those adjustments to shelve those important milliseconds from page load times. You've added gzip, Joomla caching and also enabled month long caching via the .htaccess file. The site now works fast. Cool!

A few days later you want to make some CSS updates, add some nice effects. You do that and upload the files. Imagine the mess when your users don't receive the updated CSS. This is a common scenario because depending on how you wrote the caching code in htaccess users' browsers won't even bother to ask for a new CSS till that 1 month is over. A way around this is to change the CSS paths everytime you update the CSS. So
templates/beez20/css/template.css
becomes 
templates/beez20/css/template_v1.2.css

Isn't that a pain?

Not to worry. If you've been following our series about deploying Joomla sites with git, there's a way to maintain versions of your Joomla site, and the currently deployed version gets written to a .htversion file. We use this to add a version number to your stylesheets. This way 
templates/beez20/css/template.css
becomes
templates/beez20/css/template.css?1.2
and later becomes
templates/beez20/css/template.css?1.3

So every time you deploy, we append all the CSS & JS files with the deployed version number. After deploying v1.2 the CSS path will have? 1.2 so the browsers will request the file once. Then if you deploy v1.3 the path changes to? 1.3 and the file is requested again. Between the deployments, the file remains cached with the users' browser.

All this is facilitated by the deploy-tools system plugin, which can be downloaded at - 

https://github.com/techjoomla/Joomla-Extensions/tree/master/plugins/system/deploytools