Skip to main content

RequireJS - Busting the browser cache with every deployment using Grunt targethtml plugin

The projects that I work on have deployments to the QA very often; testing out the bug fixes and new features. Every time after the deployment, I ask the QA to clear the cache, since all JavaScript files are cached by the browser. This is really frustrating to QA and I needed someway to clear the cache with every deployment. This would be same in a continuous delivery project, wherein the client would be required to clear the browser cache.

I use RequireJS to bind the dependencies between various modules. Also, I use Grunt to manage the deployment workflow. The JavaScript code is optimized using RequireJS optimizer, which minifies and combines all the dependencies.

I referred to the RequireJS documentation and found that one can use 'urlArgs' property to bust the browser cache. If you refer to that example code, it uses the JavaScript Date object and assigns the time-stamp value to the  urlArgs parameter. This works fine if you never want the Require modules to be cached by the browser. However, in a workflow where you would like these files to cleared from the cache only when there is a deployment then you can use a Grunt plugin - grunt-targethtml.

The target-html plugin parses the source html file and generates the content accordingly. In your source html file, you need to specify target tags that will be processed when Grunt is run:

Here, the target html code that will be processed by the Grunt plugin is included in a comment. It has an 'If statement' which declares that if the grunt build is being run with 'dist' as an option then include the below code. Notice that the script block also specifies a template variable - 'bustVersion'. When the html content is being generated this would be treated as string that needs to be replaced with a value.

In your target html configuration (in Gruntfile.js) you need to provide the value that will be assigned to this variable:

Here, the 'curlyTags' configuration includes a template string 'bustVersion' whose value is a scriptlet '<%= grunt.template.today("yyyymmdd") %>'. Also, the files configuration includes the mapping between the destination file and the source file. Here 'dist/index.html' is the destination file and 'dev/index.html' is the source file that will be processed.

 When 'grunt dist' is run, the template string {{bustVersion}} is replaced with today's date (in 'yyyymmdd' format). The destination file will now have script tag specifying the RequireJS configuration - 'urlArgs' with the date generated using the scriptlet.
Labels:

Comments

Post a Comment

Popular posts from this blog

File upload and Progress events with HTML5 XmlHttpRequest Level 2

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach .  With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag -  progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.
18 comments
Read more

Server sent events with HTML5 and ColdFusion

There are several ways to interact with the server apart from the traditional request\response and refresh all protocol. They are polling, long polling, Ajax and Websockets ( pusherapp ). Of all these Ajax and Websockets have been very popular. There is another way to interact with the server such that the server can send notifications to the client using Server Sent Events (SSE) . SSE is a part of HTML5 spec:  http://dev.w3.org/html5/eventsource/
19 comments
Read more

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.
Post a Comment
Read more