Automatically Version your Javascript & Stylesheets
Recently, I was browsing the internet, as you do, and I came across a great little article that discussed the automatic versioning of stylesheets, javascript, flash and image files.
As i constantly have to hold shift when refreshing to get a full page refresh, I decided this method was genius and decided there were a few things needed to make it perfect.
First of all, I couldn’t get the cache code which goes in .htaccess to work, after closer inspection you must make sure mod_expires is enabled on your server (if you run your own), otherwise you will see a 500 error.
Secondly, the autoVer ended up breaking my javascript and stylesheet files as I name them with multiple periods and it was subsequently replacing them all with numbers so i ended up with filenames like framework.1230203232.version.21302302.two.js which is a bit over the top.
Anyway, this is my revised version, for those of you who haven’t read Particletree, you don’t necessarily need to, I will cover all the required parts.
First of all, we modify .htaccess so that it sets an expiry date on all stylesheets, images and javascript files.
.htaccess
<FilesMatch "\.(gif|png|jpg|js|css|swf)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
#Rules for the versioned files
RewriteRule ^(scripts|css|images)/(.+)\.([a-zA-Z0-9]+)\.(js|css|jpg|gif|png)$ $1/$2.$4 [L]
This will make all images, stylesheets, flash and javascript cache for 10 years (reduces load on your server and bandwidth costs) and also adds the RewriteRule which handles the version file pointing to the normal files.
Next, we want to add the function, ideally you want this defined on every page, so stick it somewhere good.
the Auto Version function
function autoVer($f){ if (!file_exists($_SERVER['DOCUMENT_ROOT'].$f)) return $f return substr($f,0,strrpos($f,'.')+1).base_convert(filemtime($_SERVER['DOCUMENT_ROOT'].$f),10,36).substr($f,strrpos($f,'.')); }
In the case that php cannot find the file, it still might exist, so the function just returns the parameters it was given.
Next, we rewrite the HEAD part of your html, this file must be PHP for it to work, and the function must be included (either at the top of the page or within another file).
My HEAD area
<head> <title>arkinEx.com - Autoversion Your Javascript & CSS Stylesheets</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="arkinEx" /> <link rel="stylesheet" type="text/css" href="<?=autoVer('/resources/stylesheets/design.css')?>" /> <script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-core.js')?>"></script> <script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-more.js')?>"></script> <script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-pastejax.js')?>"></script> </head>
Which, then, will produce a nice output something like this:
<pre lang=”html”>
<link rel=”stylesheet” type=”text/css” href=”/resources/stylesheets/design.aHegDd.css” />
<script type=”text/javascript” src=”/resources/javascript/mootools-core.a45S.js”></script>
You get the idea, so try it out, let me know how you found it.
The Original Article: “Automatically Version Your CSS and Javascript Files“.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Hi
thanks alot ..right now im workin on the same task and this has given me a gut knowledge.
but im working on coldfusion , can you please post ur code in coldfusion or let me know..how do i change it into..
please email me..
Thanks
Rao