javascript - 如何用 gulp 删除 templateCache？

Question

我使用 Angular 模板缓存。按照存在的代码删除应用程序模块中的模板缓存，但我需要在开发机器上使用 gulp 删除所有 templateCache。

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

Answer 1

避免模板缓存的最佳方法是修改您的文件。

由于您使用的是 gulp，因此您可以使用 gulp-rev 或 gulp-rev-all 修改文件。

什么是修订？

通过将内容哈希附加到文件名 unicorn.css → unicorn-d41d8cd98f.css 进行静态 Assets 修订。

即，在每次构建文件名时都会发生变化，从而避免模板缓存。您可以修改每个文件，包括 .html、.css、.js、images、videos等

由于 gulp-rev-all 是最新的并且是从 gulp-rev 派生出来的，所以我们只讨论 gulp-rev-all。

使用 gulp-rev-all 修改:

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

如果你想忽略一些文件进行修改，你可以这样做。

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

考虑所有文件都在文件夹 dist 中，并将新修订的文件保存在文件夹 www 中。(您可以将它们保存在 dist 还有。考虑到 www 是您的构建目录。)

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

接下来，创建一个 manifest 文件以将您的文件与修订后的文件进行映射。为此使用 .manifestFile() 函数。它返回一个转换函数，该函数将过滤掉通过管道的任何现有文件并发出一个新的 list 文件。必须在 .revision() 之后调用。

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

Assets list ，将原始路径映射到修改后的路径，将写入 www/manifest/rev-manifest.json:

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

完整代码:

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'));
});

阅读更多关于 gulp-rev-all here