使用 grunt 构建的 Angular 应用程序中缺少资产

我使用 Yeoman 和 AngularJS（以及所有与之相关的东西，如 Grunt 和 Bower）构建了一个应用程序。

当使用本地运行时，一切都完美运行grunt serve。然而，在运行 grunt 并部署应用程序后，有一些丢失的资产，我不确定解决它的最佳方法是什么。

首先，运行 Grunt 似乎会将图像复制到 dist，但它会重命名它们，而无需调整 CSS 中的引用。app/images/uparrow.png变成dist/images/3f84644a.uparrow.png.

这是 main.scss 中的一行：

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

当它在构建过程中被编译为 CSS 时，它不会重写路径，因此浏览器会尝试加载dist/images/uparrow.png哪个缺失了。

其次，加载 Bootstrap 插件的字体存在问题。引导 CSS 位于app/bower_components/bootstrap/dist/css/bootstrap.css参考../fonts/glyphicons-halflings-regular.woff。相对路径被解析为app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof效果很好。

不过，一旦构建完成，供应商 CSS 就会被组合并缩小为单个 CSS 文件，网址为dist/styles/8727a602.vendor.css。不过，字体的相对路径不会被重写。所以它尝试在dist/fonts文件夹，而不是dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof文件实际所在的位置。

非常感谢任何建议。

您正面临 Yeoman 错误build尚未确定的任务。我相信没有干净的解决方案，因此这里有一些解决方法。

首先，图像转速：

只需从其中删除图像rev任务，你就可以开始了。

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
        '<%= yeoman.dist %>/styles/fonts/*'
      ]
    }
  }
},

其次，bootstrap-sass 字体不会复制到 dist 文件夹中。我花了几个小时研究这个错误，但找不到合适的解决方案。最后我决定添加一条新规则copy task:

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>/fonts',
      src: ['bower_components/sass-bootstrap/fonts/*.*']
    }]
  },
  ...
}

Run grunt build在这些更改之后再次进行，它应该可以工作。