GruntJS - 咕噜声构建后错误的图像路径 [英] GruntJS - wrong image paths after grunt build

问题描述

Grunt正在搞乱我缩小的CSS，我无法弄清楚为什么以及如何避免它。

简单地说，在缩小之前，我有一些像这样的背景图片：

  .head-image {
 height：380px; 
 background：url（../ images / head1_bg.png）repeat-x; 
 -webkit-background-size：cover; 
 background-size：cover; 
} 
  

然后，在整个过程之后，我有一个缩小的CSS，就像这样（片段）：

  [...] background：url（/home/domo/projects/lp/.tmp/images /head1_bg.png）repeat-x; background-size：cover} [...] 
  

上述路径不仅是绝对路径，而且它甚至是错误的，因为图像可以在 dist / images 中找到，而不是在 .tmp / images中找到（甚至不存在...）。

这里提到了一个非常类似的问题： yeoman＃824

我尝试了2个解决方案（＃17759188 和＃29137057 ）但无济于事。

我甚至尝试使用yeoman的所谓补丁版本，如另一个堆栈溢出问题所述（ Yeoman CSS图像路径）发布，仍然没有成功...

也许有人拥有已经走过这条路，找到了我在互联网上找不到的解决方案。

编辑：我可以在HTML偏好内添加更多详细信息

图片路径不受影响，如下所示：

ng-src =./ images / box _ {{$ index + 1}}。png

Gruntfile.js

  //生成在2014-07-14使用generator-angular 0.8.0 
'use strict'; 
 
 //＃Globbing 
 //出于性能原因，我们只匹配一个级别：
 //'test / spec / {，* /} *。js' 
 //如果要递归匹配所有子文件夹，请使用它：
 //'test / spec / ** / *。js'
 
 module.exports = function（grunt ）{
 
 //自动加载grunt任务
 require（'load-grunt-tasks'）（grunt）; 
 
 //时间多长时间完成任务。在优化构建时间时可以提供帮助
 require（'time-grunt'）（grunt）; 
 
 //定义所有任务的配置
 grunt.initConfig（{
 
 //项目设置
 yeoman：{
 / /可配置路径
 app：require（'./ bower.json'）。appPath ||'app'，
 dist：'dist'
}，
 
 //监视文件以进行更改并根据更改后的文件运行任务
 watch：{
 bower：{
 files：['bower.json']，
 tasks：[' bowerInstall'] 
}，
 js：{
 files：['<％= yeoman.app％> / scripts / {，* /} *。js']，
任务：['newer：jshint：all']，
选项：{
 livereload：true 
} 
}，
 jsTest：{
文件：['test / spec / {，* /} *。js']，
任务：['newer：jshint：test'，'karma'] 
}，
指南针： {
 files：['<％= yeoman.app％> / styles / {，* /} *。{scss，sass}']，
 tasks：['compass：server ，'autoprefixer'] 
}，
 gruntfile：{
 files：['Gruntfile.js'] 
}，
 livereload：{
 options： {
 livereload：'<％= connect.options.livereload％>'
}，
文件：[
'<％= yeoman.app％> / {，* /} / {，* /} *。html'，
'.tmp / styles / {，* /} *。css'，
'<％= yeoman.app％> ; / images / {，* /} *。{png，jpg，jpeg，gif，webp，svg}'
] 
} 
}，
 
 / /实际的grunt服务器设置
 connect：{
 options：{
 port：9000，
 //将其更改为'0.0.0.0'以从外部访问服务器。 
主机名：'0.0.0.0'，
 livereload：35729 
}，
 livereload：{
选项：{
开放：true，
 base：[
'.tmp'，
'<％= yeoman.app％>'
] 
} 
}，
 test ：{
 options：{
 port：9001，
 base：[
'.tmp'，
'test'，
'<％= yeoman.app％>'
] 
} 
}，
 dist：{
选项：{
 base：'<％= yeoman。 dist％>'
} 
} 
}，
 
 //确保代码样式达到标准并且没有明显的错误
 jshint ：{
 options：{
 jshintrc：'.jshintrc'，
记者：require（'jshint-stylish'）
}，
全部：[
'Gruntfile.js'，
'<％= yeoman。应用％> / scripts / {，* /} *。js'
]，
 test：{
 options：{
 jshintrc：'test / .jshintrc'
 $，
 src：['test / spec / {，* /} *。js'] 
} 
}，
 
 //将文件夹清空为开始新鲜
 clean：{
 dist：{
 files：[{
 dot：true，
 src：[
'.tmp'，
'<％= yeoman.dist％> / *'，
'！<％= yeoman.dist％> /。git *'
] 
}] 
}，
服务器：'.tmp'
}，
 
 //添加供应商前缀样式
 autoprefixer：{
 options：{
 browsers：['last 1 version'] 
}，
 dist：{
 files：[{
 expand：true，
 cwd：'.tmp / styles /'，
 src：'{，* /} *。css'，
 dest：'.tmp / styles /'
}] 
} 
 }，
 
 / /自动将Bower组件注入应用程序
 bowerInstall：{
 app：{
 src：['<％= yeoman.app％> /index.html']，
 ignorePath：'<％= yeoman.app％> /'
}，
 sass：{
 src：['<％= yeoman.app％> / styles / {，* /} *。{scss，sass}']，
 ignorePath：'<％= yeoman.app％> / bower_components /'
} 
}，
 
 //将Sass编译为CSS，并根据请求生成必要的文件
 compass：{
 options：{
 sassDir：'<％= yeoman.app％> / styles '，
 cssDir：'.tmp / styles'，
 generatedImagesDir：'.tmp / images / generated'，
 imagesDir：'<％= yeoman.app％> / images' ，
 javascriptsDir：'<％= yeoman.app％> / scripts'，
 fontsDir：'<％= yeoman.app％> / styles / fonts'，
 importPath ：'<％= yeoman.app％> / bower_components'，
 httpImage sPath：'/ images'，
 httpGeneratedImagesPath：'/ images / generated'，
 httpFontsPath：'/ styles / fonts'，
 relativeAssets：false，
 assetCacheBuster：false，
 raw：'Sass :: Script :: Number.precision = 10 \''
}，
 dist：{
 options：{
 generatedImagesDir：'< ％= yeoman.dist％> / images / generated'
} 
}，
 server：{
 options：{
 debugInfo：true 
} 
} 
}，
 
 //将文件重命名为浏览器缓存目的
 rev：{
 dist：{
 files：{
 src：[
'<％= yeoman.dist％> / scripts / {，* /} *。js'，
'<％= yeoman.dist％> / styles /{,*/}*.css'，
'<％= yeoman.dist％> / images / {，* /} *。{png，jpg，jpeg，gif，webp，svg}' ，
'<％= yeoman.dist％> / styles / fonts / *'
 ] 
} 
} 
}，
 
 //读取usemin块的HTML以启用自动生成的智能构建
 // concat，minify和修订文件。在内存中创建配置，以便
 //额外的任务可以对它们进行操作
 useminPrepare：{
 html：'<％= yeoman.app％> /index.html'，
选项：{
 dest：'<％= yeoman.dist％>'，
 flow：{
 html：{
 steps：{
 js： ['concat'，'uglifyjs']，
 css：['cssmin'] 
}，
 post：{} 
} 
} 
} 
}，
 
 //根据rev和useminPrepare配置执行重写
 usemin：{
 html：['<％= yeoman.dist％> /{,*/}*.html']，
 css：['<％= yeoman.dist％> / styles / {，* /} *。css']，
 options： {
 assetsDirs：['<％= yeoman.dist％>'] 
} 
}，
 
 //以下* -min任务会缩小dist文件夹中的文件
 cssmin：{
 options：{
 root：'& lt;％= yeoman.app％>'
} 
}，
 
 imagemin：{
 dist：{
 files：[{
 expand：true，
 cwd：'<％= yeoman.app％> / images'，
 src：'{，* /} *。{png，jpg，jpeg，gif} '，
 dest：'<％= yeoman.dist％> / images'
}] 
} 
}，
 
 svgmin：{ 
 dist：{
 files：[{
 expand：true，
 cwd：'<％= yeoman.app％> / images'，
 src： '{，* /} *。svg'，
 dest：'<％= yeoman.dist％> / images'
}] 
} 
}，
 
 htmlmin：{
 dist：{
 options：{
 collapseWhitespace：true，
 collapseBooleanAttributes：true，
 removeCommentsFromCDATA：true，
 removeOptionalTags：true 
}，
 files：[{
 expand：true，
 cwd：'<％= yeoman .dist％>'，
 src：['* .html'，'views / {，* /} *。html']，
 dest：'<％= yeoman.dist％> ;'
}] 
} 
}，
 
 // ngmin尝试使代码安全地自动缩小
 //使用Angular long形式为依赖注入。它不适用于
 //像解析或注入之类的东西，所以必须手动完成。 
 ngmin：{
 dist：{
 files：[{
 expand：true，
 cwd：'.tmp / concat / scripts'，
 src ：'* .js'，
 dest：'.tmp / concat / scripts'
}] 
} 
}，
 
 //替换Google CDN引用
 cdnify：{
 dist：{
 html：['<％= yeoman.dist％> / *。html'] 
} 
} ，
 
 //将剩余文件复制到其他任务可以使用的位置
复制：{
 dist：{
 files：[{
 expand：true， 
 dot：true，
 cwd：'<％= yeoman.app％>'，
 dest：'<％= yeoman.dist％>'，
 src：[
'*。{ico，png，txt}'，
'.htaccess'，
'* .html'，
'views / {，* /} * .html'，
'images / {，* /} *。{webp}'，
'fonts / *'
] 
}，{
 expand：true，
 cwd：'.tmp / images'，
 dest：'<％= yeoman.dist％> / images'，
 src：['generated / *' ] 
}] 
}，
风格：{
展开：true，
 cwd：'<％= yeoman.app％> / styles'，
 dest：'.tmp / styles /'，
 src：'{，* /} *。css'
} 
}，
 
 //并行运行一些任务以加快构建过程
 concurrent：{
 server：[
'compass：server'
]，
 test：[
'指南针'
]，
 dist：[
'指南针：dist'，
'imagemin'，
'svgmin'
] 
}，
 
 //默认情况下，您的`index.html`的<！ -  Usemin块 - >会照顾
 //缩小。如果您不希望
 //使用Usemin块，则会预先配置这些下一个选项。 
 // cssmin：{
 // dist：{
 //文件：{
 //'<％= yeoman.dist％> /styles/main.css '：[
 //'.tmp / styles / {，* /} *。css'，
 //'<％= yeoman.app％> / styles / {，* /} * .css'
 //] 
 //} 
 //} 
 //}，
 // uglify：{
 // dist： {
 //文件：{
 //'<％= yeoman.dist％> /scripts/scripts.js'：[
 //'<％= yeoman.dist ％> /scripts/scripts.js'
 //] 
 //} 
 //} 
 //}，
 // concat：{
 // dist：{} 
 //}，
 
 //测试设置
 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：s​​erver'，
 'bowerInstall'，
'concurrent：server'，
'autoprefixer'，
'connect：livereload'，
'watch'
））; 
 }）; 
 
 grunt.registerTask（'server'，function（target）{
 grunt.log.warn（'服务器`任务已被弃用，使用`grunt serve`启动服务器'）; 
 grunt.task.run（['serve：'+ target]）; 
}）; 
 
 grunt.registerTask（'test'，[
'clean：s​​erver'，
'concurrent'test'，$ b $'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'
]）; 
}; 
  

解决方案

前段时间，我遇到了类似cssmin的问题...

我的配置是：

  cssmin：{
选项：{
 root：'<％= yeoman.app％>'
} 
}，
  

然后我已经删除了 root 属性，它解决了这个问题。

UPD1：
您还需要将图像添加到configdarion中的assetsDirs for usemin：

  usemin：{
 html：['<％= yeoman.dist％> / {，* /} *。html']，
 css：['<％= yeoman .dist％> / styles / {，* /} * .css']，
 options：{
 assetsDirs：['<％= yeoman.dist％>'，'<％ = yeoman.dist％> / images'] 
} 
}，
  

UPD2：
关于包含 ng-src =./ images / box _ {{$ index + 1}}。。png，用usemin直接处理它们是不可能的，因为没有办法在这个表达式中处理文件修订...

但是你可以添加单独的图像与图像URL，如：

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

并使用额外的usemin模式处理这些贴图：

  usemin：{
 html：['<％= yeoman.dist％> / {，* /} *。html']，
 htmlExtra：['<％= yeoman.dist％> / {，* /} *。html']，
 css：['<％= yeoman.dist％> / styles / {，* /}*.css']，
选项：{
 assetsDirs：['<％= yeoman.dist％>'，'<％= yeoman.dist％> / images'] ，
 patterns：{
 htmlExtra：[
 [/ [']？src [']？\s *：\s * [']（[^' ] +）['] / gm，'替换图像映射中的网址'] 
] 
} 
} 
}，
  
 
 
 
然后在构建之后，您将得到如下所示的内容： 
 
 
 < 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> 
  
 
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 {
  height: 380px;
  background: url("../images/head1_bg.png") repeat-x;
  -webkit-background-size: cover;
  background-size: cover;
}
Then, after the whole process, I have a minified CSS that goes like this (snippet):
[...]background:url(/home/domo/projects/lp/.tmp/images/head1_bg.png) repeat-x;background-size:cover}[...]
The aforementioned path not only is an absolute path, but it's even wrong, since the images can be found in dist/images, not in .tmp/images (which doesn't even exists...).

A very similar issue is mentioned here: yeoman#824

I tried 2 solutions from that thread (#17759188 and #29137057) but to no avail.  

I even tried using the supposedly patched version of yeoman, as stated in another Stack Overflow question (Yeoman CSS image paths) post, still with no success...

Maybe someone has already walked this path and found a solution that I haven't found on the internet.  

Edit: I can add one more detail  

image path inside HTML partials are not affected, like this:

ng-src="./images/box_{{$index+1}}.png"

Gruntfile.js
// 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: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
        tasks: ['newer:jshint:all'],
        options: {
          livereload: true
        }
      },
      jsTest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: ['newer:jshint:test', 'karma']
      },
      compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass:server', 'autoprefixer']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= yeoman.app %>/{,*/}/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= yeoman.app %>/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',
            '<%= yeoman.app %>'
          ]
        }
      },
      test: {
        options: {
          port: 9001,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ]
        }
      },
      dist: {
        options: {
          base: '<%= yeoman.dist %>'
        }
      }
    },

    // 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',
        '<%= yeoman.app %>/scripts/{,*/}*.js'
      ],
      test: {
        options: {
          jshintrc: 'test/.jshintrc'
        },
        src: ['test/spec/{,*/}*.js']
      }
    },

    // Empties folders to start fresh
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/*',
            '!<%= yeoman.dist %>/.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: ['<%= yeoman.app %>/index.html'],
        ignorePath: '<%= yeoman.app %>/'
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: '<%= yeoman.app %>/bower_components/'
      }
    },

    // Compiles Sass to CSS and generates necessary files if requested
    compass: {
      options: {
        sassDir: '<%= yeoman.app %>/styles',
        cssDir: '.tmp/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/styles/fonts',
        importPath: '<%= yeoman.app %>/bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/styles/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      },
      dist: {
        options: {
          generatedImagesDir: '<%= yeoman.dist %>/images/generated'
        }
      },
      server: {
        options: {
          debugInfo: true
        }
      }
    },

    // Renames files for browser caching purposes
    rev: {
      dist: {
        files: {
          src: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/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: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

    // Performs rewrites based on rev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>']
      }
    },

    // The following *-min tasks produce minified files in the dist folder
    cssmin: {
      options: {
        root: '<%= yeoman.app %>'
      }
    },

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

    svgmin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.svg',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    },

    htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },

    // 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: ['<%= yeoman.dist %>/*.html']
      }
    },

    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'images/{,*/}*.{webp}',
            'fonts/*'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }]
      },
      styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/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 <!-- Usemin block --> will take care of
    // minification. These next options are pre-configured if you do not wish
    // to use the Usemin blocks.
    // cssmin: {
    //   dist: {
    //     files: {
    //       '<%= yeoman.dist %>/styles/main.css': [
    //         '.tmp/styles/{,*/}*.css',
    //         '<%= yeoman.app %>/styles/{,*/}*.css'
    //       ]
    //     }
    //   }
    // },
    // uglify: {
    //   dist: {
    //     files: {
    //       '<%= yeoman.dist %>/scripts/scripts.js': [
    //         '<%= yeoman.dist %>/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'
  ]);
};

解决方案
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>


                        
这篇关于GruntJS  - 咕噜声构建后错误的图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！