[Frontend] Add cache busting to frontend (#4037)

* Added Cache Busting

* .

frontend/src/js/app.js

@@ -15,6 +15,25 @@ angular
 		'angularMoment',
 		'ngclipboard',
 		'moment-picker'
-	]).config(['$compileProvider', function($compileProvider) {
-    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel|javascript):/);
-}]);
+	])
+	.service('preventTemplateCache', [function() {
+		var service = this;
+		service.request = function(config) {
+			var urlSegments = config.url.split('/');
+			// Check each segment for "/dist/"
+			var isDistUrl = urlSegments.some(function(segment) {
+				return segment === 'dist';
+			});
+			if (isDistUrl) {
+				config.url = config.url + '?t=___REPLACE_IN_GULP___';
+
+			}
+			return config;
+		};
+	}])
+	.config(['$httpProvider',function ($httpProvider) {
+		$httpProvider.interceptors.push('preventTemplateCache');
+	}])
+	.config(['$compileProvider', function($compileProvider) {
+		$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel|javascript):/);
+	}]);

gulpfile.js

@@ -14,14 +14,16 @@ var gulp = require('gulp'),
     inject = require('gulp-inject'),
     uglify = require('gulp-uglify'),
     eslint = require('gulp-eslint'),
+    cachebust = require('gulp-cache-bust'),
     connectModRewrite = require('connect-modrewrite'),
     connect = require('gulp-connect'),
+    through = require('through2'),
     gulp_if = require('gulp-if'),
     replace = require('gulp-replace');
 
 // development task
 var production = false;
-
+let timestamp;
 var scripts = JSON.parse(fs.readFileSync('frontend/app.scripts.json'));
 var styles = JSON.parse(fs.readFileSync('frontend/app.styles.json'));
 var configJson = JSON.parse(fs.readFileSync('frontend/src/js/config.json'));
@@ -233,12 +235,30 @@ function injectpaths() {
     ], { read: false });
     return target
         .pipe(inject(sources, { ignorePath: 'frontend', addRootSlash: true }))
+        .pipe(gulp_if('*.js', production ? uglify() : gulp.dest('dist')))
+        .pipe(gulp_if('*.css', production ? cleanCSS() : gulp.dest('dist')))
+        .pipe(production ? cachebust({ type: 'timestamp' }) : gulp.dest('dist'))
+        .pipe(through.obj((file, enc, cb) => {
+            // Extract the timestamp value from the file contents
+            const fileContents = file.contents.toString();
+            const regex = /\?t=(\d+)/;
+            const matches = fileContents.match(regex);
+            if (matches && matches[1]) {
+              timestamp = matches[1];
+            }
+            cb(null, file);
+          }))
         .pipe(rename({
             basename: "index"
         }))
         .pipe(gulp.dest('frontend/'));
 }
 
+function replacetimestamp() {
+    return gulp.src('frontend/dist/**/*.*')
+    .pipe(replace('___REPLACE_IN_GULP___', timestamp))
+    .pipe(gulp.dest('frontend/dist'));
+}
 
 /*
 js linting
@@ -305,12 +325,12 @@ var parallelTasks = gulp.parallel(vendorcss, vendorjs, css, js, html, images, fo
 gulp.task('production', gulp.series(clean, function(done) {
     production = true;
     done();
-}, parallelTasks, configProd, injectpaths, lint));
+}, parallelTasks, configProd, injectpaths, replacetimestamp, lint));
 
 gulp.task('staging', gulp.series(clean, function(done) {
     production = true;
     done();
-}, parallelTasks, configStaging, injectpaths, lint));
+}, parallelTasks, configStaging, injectpaths, replacetimestamp, lint));
 
 gulp.task('dev', gulp.series(clean, function(done) {
     production = false;

package.json

@@ -11,25 +11,20 @@
   "dependencies": {
     "autoprefixer": "^8.2.0",
     "connect-modrewrite": "^0.10.2",
-    "del": "^3.0.0",
     "eslint": "^4.19.1",
     "eslint-config-angular": "^0.5.0",
     "eslint-plugin-angular": "^3.3.0",
     "fs": "0.0.1-security",
-    "gulp": "^4.0.0",
-    "gulp-clean-css": "^3.9.3",
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^5.0.0",
     "gulp-eslint": "^4.0.2",
-    "gulp-if": "^2.0.2",
     "gulp-inject": "^4.2.0",
     "gulp-path": "^4.0.0",
     "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
-    "gulp-uglify": "^3.0.0",
     "lodash": "^4.16.6",
     "merge-stream": "^1.0.0",
     "node-sass": "^4.9.0"
@@ -40,14 +35,22 @@
   },
   "devDependencies": {
     "angular-mocks": "1.7.0",
+    "del": "^3.0.0",
+    "gulp": "^4.0.2",
+    "gulp-cache-bust": "^1.4.1",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-if": "^2.0.2",
+    "gulp-string-replace": "^1.1.2",
+    "gulp-uglify": "^3.0.2",
+    "gulp-useref": "^5.0.0",
     "istanbul": "^0.4.5",
     "jasmine-core": "^3.4.0",
     "karma": "^4.1.0",
+    "karma-brief-reporter": "^0.2.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^1.1.2",
     "karma-coveralls": "^2.1.0",
-    "karma-brief-reporter": "^0.2.1",
     "karma-jasmine": "^2.0.1",
     "puppeteer": "^1.16.0"
   }