title: GruntJS - wrong image paths after grunt build
body: <p>Grunt is messing my minified CSS and I cannot figure out why and how to avoid it.  </p>
  
  <p>To be brief, before the minification I have some background images like this:</p>
  
  <pre><code>.head-image {
    height: 380px;
    background: url("../images/head1_bg.png") repeat-x;
    -webkit-background-size: cover;
    background-size: cover;
  }
  </code></pre>
  
  <p>Then, after the whole process, I have a minified CSS that goes like this (snippet):</p>
  
  <pre><code>[...]background:url(/home/domo/projects/lp/.tmp/images/head1_bg.png) repeat-x;background-size:cover}[...]
  </code></pre>
  
  <p>The aforementioned path not only is an absolute path, but it's even wrong, since the images can be found in <code>dist/images</code>, not in <code>.tmp/images</code> (which doesn't even exists...).</p>
  
  <p>A very similar issue is mentioned here: <a href="https://github.com/yeoman/yeoman/issues/824" rel="nofollow noreferrer">yeoman#824</a><br>
  I tried 2 solutions from that thread (<a href="https://github.com/yeoman/yeoman/issues/824#issuecomment-17759188" rel="nofollow noreferrer">#17759188</a> and <a href="https://github.com/yeoman/yeoman/issues/824#issuecomment-29137057" rel="nofollow noreferrer">#29137057</a>) but to no avail.  </p>
  
  <p>I even tried using the supposedly patched version of yeoman, as stated in another Stack Overflow question (<a href="https://stackoverflow.com/questions/14316643/yeoman-css-image-paths/14341950#14341950">Yeoman CSS image paths</a>) post, still with no success...</p>
  
  <p>Maybe someone has already walked this path and found a solution that I haven't found on the internet.  </p>
  
  <p><strong>Edit:</strong> I can add one more detail  </p>
  
  <p>image path inside HTML partials are not affected, like this:<br>
  <code>ng-src="./images/box_{{$index+1}}.png"</code></p>
  
  <p><strong>Gruntfile.js</strong></p>
  
  <pre><code>// Generated on 2014-07-14 using generator-angular 0.8.0
  'use strict';
  
  // # Globbing
  // for performance reasons we're only matching one level down:
  // 'test/spec/{,*/}*.js'
  // use this if you want to recursively match all subfolders:
  // 'test/spec/**/*.js'
  
  module.exports = function (grunt) {
  
    // Load grunt tasks automatically
    require('load-grunt-tasks')(grunt);
  
    // Time how long tasks take. Can help when optimizing build times
    require('time-grunt')(grunt);
  
    // Define the configuration for all the tasks
    grunt.initConfig({
  
      // Project settings
      yeoman: {
        // configurable paths
        app: require('./bower.json').appPath || 'app',
        dist: 'dist'
      },
  
      // Watches files for changes and runs tasks based on the changed files
      watch: {
        bower: {
          files: ['bower.json'],
          tasks: ['bowerInstall']
        },
        js: {
          files: ['&lt;%= yeoman.app %&gt;/scripts/{,*/}*.js'],
          tasks: ['newer:jshint:all'],
          options: {
            livereload: true
          }
        },
        jsTest: {
          files: ['test/spec/{,*/}*.js'],
          tasks: ['newer:jshint:test', 'karma']
        },
        compass: {
          files: ['&lt;%= yeoman.app %&gt;/styles/{,*/}*.{scss,sass}'],
          tasks: ['compass:server', 'autoprefixer']
        },
        gruntfile: {
          files: ['Gruntfile.js']
        },
        livereload: {
          options: {
            livereload: '&lt;%= connect.options.livereload %&gt;'
          },
          files: [
            '&lt;%= yeoman.app %&gt;/{,*/}/{,*/}*.html',
            '.tmp/styles/{,*/}*.css',
            '&lt;%= yeoman.app %&gt;/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
          ]
        }
      },
  
      // The actual grunt server settings
      connect: {
        options: {
          port: 9000,
          // Change this to '0.0.0.0' to access the server from outside.
          hostname: '0.0.0.0',
          livereload: 35729
        },
        livereload: {
          options: {
            open: true,
            base: [
              '.tmp',
              '&lt;%= yeoman.app %&gt;'
            ]
          }
        },
        test: {
          options: {
            port: 9001,
            base: [
              '.tmp',
              'test',
              '&lt;%= yeoman.app %&gt;'
            ]
          }
        },
        dist: {
          options: {
            base: '&lt;%= yeoman.dist %&gt;'
          }
        }
      },
  
      // Make sure code styles are up to par and there are no obvious mistakes
      jshint: {
        options: {
          jshintrc: '.jshintrc',
          reporter: require('jshint-stylish')
        },
        all: [
          'Gruntfile.js',
          '&lt;%= yeoman.app %&gt;/scripts/{,*/}*.js'
        ],
        test: {
          options: {
            jshintrc: 'test/.jshintrc'
          },
          src: ['test/spec/{,*/}*.js']
        }
      },
  
      // Empties folders to start fresh
      clean: {
        dist: {
          files: [{
            dot: true,
            src: [
              '.tmp',
              '&lt;%= yeoman.dist %&gt;/*',
              '!&lt;%= yeoman.dist %&gt;/.git*'
            ]
          }]
        },
        server: '.tmp'
      },
  
      // Add vendor prefixed styles
      autoprefixer: {
        options: {
          browsers: ['last 1 version']
        },
        dist: {
          files: [{
            expand: true,
            cwd: '.tmp/styles/',
            src: '{,*/}*.css',
            dest: '.tmp/styles/'
          }]
        }
      },
  
      // Automatically inject Bower components into the app
      bowerInstall: {
        app: {
          src: ['&lt;%= yeoman.app %&gt;/index.html'],
          ignorePath: '&lt;%= yeoman.app %&gt;/'
        },
        sass: {
          src: ['&lt;%= yeoman.app %&gt;/styles/{,*/}*.{scss,sass}'],
          ignorePath: '&lt;%= yeoman.app %&gt;/bower_components/'
        }
      },
  
      // Compiles Sass to CSS and generates necessary files if requested
      compass: {
        options: {
          sassDir: '&lt;%= yeoman.app %&gt;/styles',
          cssDir: '.tmp/styles',
          generatedImagesDir: '.tmp/images/generated',
          imagesDir: '&lt;%= yeoman.app %&gt;/images',
          javascriptsDir: '&lt;%= yeoman.app %&gt;/scripts',
          fontsDir: '&lt;%= yeoman.app %&gt;/styles/fonts',
          importPath: '&lt;%= yeoman.app %&gt;/bower_components',
          httpImagesPath: '/images',
          httpGeneratedImagesPath: '/images/generated',
          httpFontsPath: '/styles/fonts',
          relativeAssets: false,
          assetCacheBuster: false,
          raw: 'Sass::Script::Number.precision = 10\n'
        },
        dist: {
          options: {
            generatedImagesDir: '&lt;%= yeoman.dist %&gt;/images/generated'
          }
        },
        server: {
          options: {
            debugInfo: true
          }
        }
      },
  
      // Renames files for browser caching purposes
      rev: {
        dist: {
          files: {
            src: [
              '&lt;%= yeoman.dist %&gt;/scripts/{,*/}*.js',
              '&lt;%= yeoman.dist %&gt;/styles/{,*/}*.css',
              '&lt;%= yeoman.dist %&gt;/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '&lt;%= yeoman.dist %&gt;/styles/fonts/*'
            ]
          }
        }
      },
  
      // Reads HTML for usemin blocks to enable smart builds that automatically
      // concat, minify and revision files. Creates configurations in memory so
      // additional tasks can operate on them
      useminPrepare: {
        html: '&lt;%= yeoman.app %&gt;/index.html',
        options: {
          dest: '&lt;%= yeoman.dist %&gt;',
          flow: {
            html: {
              steps: {
                js: ['concat', 'uglifyjs'],
                css: ['cssmin']
              },
              post: {}
            }
          }
        }
      },
  
      // Performs rewrites based on rev and the useminPrepare configuration
      usemin: {
        html: ['&lt;%= yeoman.dist %&gt;/{,*/}*.html'],
        css: ['&lt;%= yeoman.dist %&gt;/styles/{,*/}*.css'],
        options: {
          assetsDirs: ['&lt;%= yeoman.dist %&gt;']
        }
      },
  
      // The following *-min tasks produce minified files in the dist folder
      cssmin: {
        options: {
          root: '&lt;%= yeoman.app %&gt;'
        }
      },
  
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.app %&gt;/images',
            src: '{,*/}*.{png,jpg,jpeg,gif}',
            dest: '&lt;%= yeoman.dist %&gt;/images'
          }]
        }
      },
  
      svgmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.app %&gt;/images',
            src: '{,*/}*.svg',
            dest: '&lt;%= yeoman.dist %&gt;/images'
          }]
        }
      },
  
      htmlmin: {
        dist: {
          options: {
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeCommentsFromCDATA: true,
            removeOptionalTags: true
          },
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.dist %&gt;',
            src: ['*.html', 'views/{,*/}*.html'],
            dest: '&lt;%= yeoman.dist %&gt;'
          }]
        }
      },
  
      // ngmin tries to make the code safe for minification automatically by
      // using the Angular long form for dependency injection. It doesn't work on
      // things like resolve or inject so those have to be done manually.
      ngmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '.tmp/concat/scripts',
            src: '*.js',
            dest: '.tmp/concat/scripts'
          }]
        }
      },
  
      // Replace Google CDN references
      cdnify: {
        dist: {
          html: ['&lt;%= yeoman.dist %&gt;/*.html']
        }
      },
  
      // Copies remaining files to places other tasks can use
      copy: {
        dist: {
          files: [{
            expand: true,
            dot: true,
            cwd: '&lt;%= yeoman.app %&gt;',
            dest: '&lt;%= yeoman.dist %&gt;',
            src: [
              '*.{ico,png,txt}',
              '.htaccess',
              '*.html',
              'views/{,*/}*.html',
              'images/{,*/}*.{webp}',
              'fonts/*'
            ]
          }, {
            expand: true,
            cwd: '.tmp/images',
            dest: '&lt;%= yeoman.dist %&gt;/images',
            src: ['generated/*']
          }]
        },
        styles: {
          expand: true,
          cwd: '&lt;%= yeoman.app %&gt;/styles',
          dest: '.tmp/styles/',
          src: '{,*/}*.css'
        }
      },
  
      // Run some tasks in parallel to speed up the build process
      concurrent: {
        server: [
          'compass:server'
        ],
        test: [
          'compass'
        ],
        dist: [
          'compass:dist',
          'imagemin',
          'svgmin'
        ]
      },
  
      // By default, your `index.html`'s &lt;!-- Usemin block --&gt; will take care of
      // minification. These next options are pre-configured if you do not wish
      // to use the Usemin blocks.
      // cssmin: {
      //   dist: {
      //     files: {
      //       '&lt;%= yeoman.dist %&gt;/styles/main.css': [
      //         '.tmp/styles/{,*/}*.css',
      //         '&lt;%= yeoman.app %&gt;/styles/{,*/}*.css'
      //       ]
      //     }
      //   }
      // },
      // uglify: {
      //   dist: {
      //     files: {
      //       '&lt;%= yeoman.dist %&gt;/scripts/scripts.js': [
      //         '&lt;%= yeoman.dist %&gt;/scripts/scripts.js'
      //       ]
      //     }
      //   }
      // },
      // concat: {
      //   dist: {}
      // },
  
      // Test settings
      karma: {
        unit: {
          configFile: 'karma.conf.js',
          singleRun: true
        }
      }
    });
  
  
    grunt.registerTask('serve', function (target) {
      if (target === 'dist') {
        return grunt.task.run(['build', 'connect:dist:keepalive']);
      }
  
      grunt.task.run([
        'clean:server',
        'bowerInstall',
        'concurrent:server',
        'autoprefixer',
        'connect:livereload',
        'watch'
      ]);
    });
  
    grunt.registerTask('server', function (target) {
      grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
      grunt.task.run(['serve:' + target]);
    });
  
    grunt.registerTask('test', [
      'clean:server',
      'concurrent:test',
      'autoprefixer',
      'connect:test',
      'karma'
    ]);
  
    grunt.registerTask('build', [
      'clean:dist',
      'bowerInstall',
      'useminPrepare',
      'concurrent:dist',
      'autoprefixer',
      'concat',
      'ngmin',
      'copy:dist',
      'cdnify',
      'cssmin',
      'uglify',
      'rev',
      'usemin',
      'htmlmin'
    ]);
  
    grunt.registerTask('default', [
      'newer:jshint',
      'test',
      'build'
    ]);
  };
  </code></pre>