AngularJS Grunt load JS file with dynamic query string parameter - angularjs

Question

I am developing application with yeoman + grunt + angularJs.
To load the JS file only when require I have added JS file path inside calendar.html.
To achieve this I have modified grunt.js and html file.
Grunt.JS file
useminPrepare: {
html: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/views/*.html'],
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
}
Modified calendar.html file
<!-- build:js({.tmp,app}) scripts/fullcalendar.js -->
<script src="scripts/plugins/fullcalendar/fullcalendar.js"></script>
<!-- endbuild -->
This solution is working properly. But now whenever I load my Calendar page a fresh request goes to fullcalenar.js with dynamic query string parameter like this
http://localhost/scripts/fullcalendar.a13f9b72f8.js?_=1422010995753
This number (1422010995753) increments every time I make a request which stop browsers from caching the file.
I believe it is because of assetCacheBuster but here is my configuration of Grunt. And I have set that to false along with debugInfo.
compass: {
options: {
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
server: {
options: {
debugInfo: false
}
}
}
My problem is, I want to cache the fullcalendar.js file and don't want to fetch the fresh JS file every time.
If I move above calendar.html code inside index.html file application works properly and cache the file without combining with rest of the js. But if I add that code inside index.html, the fullcalendar.js file will get loaded with first page itself.

Answer 1

A late answer: grunt-cachebuster-querystring