My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, but I ran into a bunch of issues getting it setup and the documentation wasn’t as good. Since version 0.4.x came out in February 2013, GruntJS has been gaining momentum. There are now over 2199 plugins registered on NPM, so I decided to build #2200!

At work, we have just integrated our JavaScript and CSS workflows with GruntJS to perform tasks such as JSHint, Concatenation, Minification, SASS Compilation, JS Code Formatting to name a few. Our deployment process is a bit different, so we aren’t able to use GruntJS to move code to the production servers, but it’s something that we are exploring.

We are using GruntJS to do builds on our CSS and JS files and then will usually manually insert a cache buster string into our page headers. Currently, we blow the cache on either all the CSS or JS files by adding a cache buster string to every file. Its not the best way of doing it and its quite a manual process. I found a few plugins on NPM for cache busting, but none of them did exactly what I wanted.

There is one particular plugin that I used Grunt Cache Bust. At first I forked the code, then told the author I would be adding some functionality and was going to do a pull request. But he didnt seem too keen on adding in my features. Instead I decided to just use his code as a base, but ended up changing a lot of how it worked. I would say it’s about 20% of his code and the rest was rewritten. But wanted to give credit where credit was due.

The Bust my cache plugin will bust static assets (JavaScript and CSS) using a cache buster string. The string is the current date using You can choose to target specific files by adding them to the Gruntfile or target all of the paths in your header file.

The process of writing the plugin gave me a greater understanding to how node.js and GruntJS work. I decided to call my plugin Bust My Cache, its available on NPM, Github and you can also find it through the GruntJS plugin page by searching for “bust-my-cache”.

Feel free to download it and use it as part of your project!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: