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.
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
Post a Comment