Angular ng-src not re written for revved images with Grunt / usemin

Posted by Matt Bryson on 09-Sep-2014 15:23:10
Find me on:

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'
             ]
           ],         
          
       }
     }
   },

Topics: Angular, Grunt

About the author

Matt Bryson is an experienced systems engineer with over 15 years Development and Systems Operations experience.

NEW - Free eBook

Transforming your eDetail process. Click below to download the eBook.

New Call-to-action

Subscribe to Email Updates