angularjs - 如何使用 Grunt-Asset-Fingerprint 刷新缓存

Question

我试图解决 Angular 网站中的一个问题，即当我添加页面或进行更改时，由于缓存而不会向用户显示。读完一些书后，我明白我想做的是创建指纹。

我环顾四周，似乎 grunt-asset-fingerprint 就可以解决问题。我已经下载了该软件包并尝试运行它。但是，我有两个问题:

• 它似乎只将一个文件复制到 Assets 映射文件中(实际上这是我的 bing 授权文件)，我以为它会复制所有文件？
• 我不知道下一步该怎么做，我是否需要将指纹添加到文件名中以避免缓存问题？我在网上找不到太多文档。

任何帮助将不胜感激!我的 grunt 配置的相关部分和 asset.json 文件的输出如下。谢谢!!

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
      
    assetFingerprint: {
      options: {
        algorithm: 'md5',
      },
      dist: {
        src: ["dist/**/*"],
        dest: "dist/"
      },
    }
      
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');  
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');    
  grunt.loadNpmTasks('grunt-newer');
  grunt.loadNpmTasks('grunt-asset-fingerprint');
};

assets.json

{
  "dist/": "./dist-dec2ce4621028dc1bd5g081ea11d1aff"
}

Answer 1

我能够使用以下结构成功地将哈希附加到我的 app.js 文件中:

assetFingerprint: {
  "options": {
    "manifestPath": "dist/assets.json",
    "findAndReplaceFiles": [
        "index.html"
    ],
    "keepOriginalFiles": false
  },
  "dist": {
    "files": [
      {
        "expand": true,
        "cwd": "dist",
        "src": "app.js",
        "dest": "dist"
      }
    ]
  }
}

这还将更新我的 index.html 文件中对 app.js 的引用。您必须确保 files block 中使用的路径与您的目录结构一致。