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.

Comments

  1. Well in his case it would be render.apply(_this);

    ReplyDelete

Post a Comment

Popular posts from this blog

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

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.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript file…