how to remove templateCache with gulp?

Question

i use angular-template-cache. follow code exist for remove template cache in app module but i need to remove all templateCache with gulp on dev machine.

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

Answer 1

The best way to avoid template caching is revisioning your files.

Since you are using gulp, you can revision your files using gulp-rev or gulp-rev-all.

What is revisioning?

Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css.

i.e., On every builds the filename changes and that way avoiding template caching. You can revision every file including .html, .css, .js, images, videos etc.

Since gulp-rev-all is the latest and forked from gulp-rev, let's talk about gulp-rev-all only.

Revisioning using gulp-rev-all:

var revAll = require('gulp-rev-all');

if you want to neglect some files from revisioning, you can do that like this.

var rev = new revAll({dontRenameFile: [/^\/favicon.ico$/g, /^\/index.html/g]})

Consider all your files are in the folder dist and save the new revisioned files in the folder www.(You can save them in dist also. Considering www is your build directory.)

return gulp.src('dist/**')
  .pipe(rev.revision())
  .pipe(gulp.dest('www'))

Next, create a manifest file to map your files with the revisioned one. for that use .manifestFile() function. which returns a transform function that will filter out any existing files going through the pipe and will emit a new manifest file. Must be called after .revision().

.pipe(rev.manifest())
.pipe(gulp.dest('www/manifest'));

An asset manifest, mapping the original paths to the revisioned paths, will be written to www/manifest/rev-manifest.json:

{
 "css/unicorn.css": "css/unicorn.098f6bcd.css",
 "js/unicorn.js": "js/unicorn.273c2cin.js"
 ..... 
 ..... 
}

Complete code:

gulp.task('rev', () => {
  var revAll = require('gulp-rev-all'),
    rev = new revAll({dontRenameFile: [/^\/favicon.ico$/g, /^\/index.html/g]});
return gulp.src('dist/**')
  .pipe(rev.revision())
  .pipe(gulp.dest('www'))
  .pipe(rev.manifest())
  .pipe(gulp.dest('www/manifest'));
});

Read more about gulp-rev-all here