GruntJS - Wrong Image Paths After Grunt Build

Grunt is messing my minified CSS and I cannot figure out why and how to avoid it. To be brief, before the minification I have some background images like this: .head-image { he

Solution 1:

Some time ago, I had a similar issue with cssmin...

My config was:

cssmin: {
   options: {
     root:  '<%= yeoman.app %>'
   }
},

then I have removed root property and it solved the problem.

UPD1: Also you need to add images to assetsDirs in configutarion for usemin:

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

UPD2: About images with ng-src="./images/box_{{$index+1}}.png", it is not possible to process them directly with usemin because there is no way to handle file revision in this expression...

But you can add separate map with image urls, like :

<div ng-init="boxes=[
    {src:'images/box1.png'},
    {src:'images/box2.png'}, 
    {src:'images/box3.png'}]>
    ....
    <img ng-src={{boxes[$index].src}}/>
    ....
</div>

And process those maps with additional pattern for usemin:

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  htmlExtra: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
    patterns:{
        htmlExtra:[
            [/['"]?src['"]?\s*:\s*['"]([^"']+)['"]/gm, 'Replacing urls in image maps']
        ]
    }
  }
},

Then after build you will get something like:

<div ng-init="boxes=[
        {src:'images/box1.xxxx.png'},
        {src:'images/box2.xxxx.png'}, 
        {src:'images/box3.xxxx.png'}]">
    ....
    <img ng-src={{boxes[$index].src}}/>
    ....
</div>

Solution 2:

Have you considered using Brunch? They run a different node plugin for CSS minification than Yeoman/Grunt does. I have no problem with maintaining my "../" relative paths after minifying with Brunch. Try their Angular skeleton, just drop your stylesheet in and run a build with

brunch build --production

to minify. See if you still have this compiling issue. Done in 5 mins.

Solution 3:

I've had the the same issue, eventually i was using the grunt.filerev.summary and the patterns js functions, which found the old img url and replaced it with the matching case in the grunt.filerev.summary json "map"