yeoman build:minify renames images -> angularjs ng

Question

I am using yeoman + angular and tried out 'yeoman build:minify'. This fails because the task rev:img renames all images. Afterwards, the dynamic sources (see http://docs.angularjs.org/api/ng.directive:ngSrc) do not work anymore.

Does someone know a trick to fix this? E.g. would it be possible to avoid the image renaming?

Answer 1

In recent versions of Yeoman and its Gruntfile.js you can add folder of image to its filerev task. So that your filerev task looks like this:

// 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}',
      /* Here you'll see some ignoring: */
      '!<%= yeoman.dist %>/images/some_image.png',
      '!<%= yeoman.dist %>/images/ignore',
      '<%= yeoman.dist %>/styles/fonts/*'
    ]
  }
},

Answer 2

This is currently a known issue and we'll try to fix it soon.

In the meantime you can try out one of the suggested workarounds in this thread.

Just replace the rev config with this:

rev: {
   img: ['images/**','!images/ignore/**']
}

and place all your dynamic images in images/ignore/