AngularJS Cache Busting for Scripts and CSS

So you implement cache busting when you build the project by putting a hash based on the file's contents in the names of the static files you have and then updating the references to those values (example: you change the name of an image adding the hash value and then you need to update the name in the places where references to that image appear which - for images - would usually be css and/or html files).

What you could use are the following plugins: grunt-filerev (or grunt-rev) and grunt-usemin

You should use the filerev task together with yeoman/grunt-usemin for cache busting of static files in your app. This allows them to be cached forever by the browser.

So grunt-filerev renames the files for cache busting and grunt-usemin replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).

Example usage of this plugins from yeoman's angularjs generator Gruntfile.js:

    // Renames files for browser caching purposes
    filerev: {
      dist: {
        src: [
          '<%= yeoman.dist %>/scripts/{,*/}*.js',
          '<%= yeoman.dist %>/styles/{,*/}*.css',
          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
          '<%= yeoman.dist %>/styles/fonts/*'
        ]
      }
    },

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

    // Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
      }
    } 

You can use a yeoman generator to do this for you. The angularjs yeoman generator already does all of this for you. At the very least you can copy their solution for this problem if you don't want to use yeoman or this generator.

Note: the yeoman angularjs generator used to use the plugin grunt-rev but they later replaced that with grunt-filerev.