CODEWITHSUNDEEP
gruntjsyeoman
Karan
Karan

Reputation: 15114

can't minify images using the grunt plugin grunt-contrib-imagemin

I just downloaded a fresh copy of yeoman. When I build using grunt, I see that all my images have been converted and their file names have been renamed.

However, the references in the html file do not reference the new names.

Any idea why?

imagemin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/img',
      src: '{,*/}*.{png,jpg,jpeg}',
      dest: '<%= yeoman.dist %>/img'
    }]
  }
},

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    dirs: ['<%= yeoman.dist %>']
  }
},

ngapp/views/main.html

<a href="#red-green" style="background-image: url('img/demo/red-green.png');background-repeat: no-repeat;"></a>

Upvotes: 2

Views: 2576

Answers (2)

harrysny
harrysny

Reputation: 61

The problem is probably that your url for the image in your HTML file is a relative path and and usemin can't resolve the new path of the image to your url. See @eddiemonge comment on github for a better explanation: https://github.com/yeoman/grunt-usemin/issues/108

I had the same problem and fixed it by using a fixed path (/img/demo/red-green.png, in your case) which works fine as long as your distribution directory uses /img and img is also off the root of your app when doing development.

Upvotes: 1

passy
passy

Reputation: 7211

Renaming is done by the grunt-filerev task in your Gruntfile. The usemin task takes care of updating the references to those renamed files for scripts, stylesheets and images, but doesn't support inline styles. You should either move the background-image reference within a stylesheet or disable the rev task.

Upvotes: 2

Related Questions