We use Yoeman
to bootstrap our angular apps, but the default grunt file does not re write the revved image paths within angular ng-src
directives.
To fix this, you either edit the NPM package for usemin
and update the default patterns (not a good idea).
Or simply include all the default patterns, AND the following pattern into your grunt file...
patterns: { html: [ [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the angular directives that ref revved images'] }
The full usemin
block, with the default patterns (for yeoman) looks like this...
// Performs rewrites based on rev and the useminPrepare configuration usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'], css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], options: { assetsDirs: ['<%= yeoman.dist %>'], patterns: { html: [ [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the angular directives that ref revved images'], /* NOW ADD THE DEFAULTS FROM THE NODE MODULES - no easy way to extend this... */ /*jshint regexp:false */ [ /<script.+src=['"]([^"']+)["']/gm, 'Update the HTML to reference our concat/min/revved script files' ], [ /<link[^\>]+href=['"]([^"']+)["']/gm, 'Update the HTML with the new css filenames' ], [ /<img[^\>]+src=['"]([^"']+)["']/gm, 'Update the HTML with the new img filenames' ], [ /data-main\s*=['"]([^"']+)['"]/gm, 'Update the HTML with data-main tags', function (m) { return m.match(/\.js$/) ? m : m + '.js'; }, function (m) { return m.replace('.js', ''); } ], [ /data-(?!main).[^=]+=['"]([^'"]+)['"]/gm, 'Update the HTML with data-* tags' ], [ /url\(\s*['"]([^"']+)["']\s*\)/gm, 'Update the HTML with background imgs, case there is some inline style' ], [ /<a[^\>]+href=['"]([^"']+)["']/gm, 'Update the HTML with anchors images' ], [/<input[^\>]+src=['"]([^"']+)["']/gm, 'Update the HTML with reference in input' ] ], } } },