Grunt JS: Force clients browser to refresh JavaScript/CSS files

Caching is very important module in any application and every browser has in-built functionality to cache js/css files and use them when application load for quick response, if you want refresh cache file then you need to clear cache files manually OR press ctrl + F5 command.

This issue will be very panic when you are using automate process of build to deploy application, You could not said to end user, please clear cache files before the application use.

You can also check other recommended tutorial of Grunt js,

I am taking example of angular application, question would be why – because angular application has a lot of js and css files and may be you are using GRUNT for automate deployment process, If You are not GRUNT then please add a time stamp as a query strong on each js/css file like below.

You can learn use of GRUNT in angular application from my previous article Here

Option 1:

Add random number as query string with each js and css file.

Option 2:

You can add auto increment number of project version.

I am taking option 1 for solution, I am using grunt, So i have searched any grunt plugin which is concatenate random number with js and css file into index.html file, I have found 'grunt-cache-breaker' plug-in for this.

How to use grunt-cache-breaker with Grunt:

Step 1: Added "grunt-cache-breaker" : "~1.0.1" into package file.
Step 2: Added below code into grunt file.

Step 3: Loaded module in grunt file.

Step 4: Register task in grunt file as a last task.
‘cachebreaker:dev’

Output: dist/index.html