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

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

当使用

grunt-serve

在本地运行时，这一切都非常有效。然而，在运行grunt并部署应用程序之后，有一些资产缺失，我不确定解决这个问题的最佳方法是什么

首先，运行Grunt似乎将图像复制到dist，但它在不调整CSS中的引用的情况下重命名它们

app/images/uparrow.png

变成

dist/images/3f8464a.uparrow.png

下面是main.scss中的一行：

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

在构建过程中将其编译为CSS时，不会重写路径，因此浏览器会尝试加载缺少的

dist/images/uparrow.png

其次，加载引导插件的字体有问题。

app/bower\u components/bootstrap/dist/CSS/bootstrap.CSS中的引导CSS
引用了
。/font/glyphicons-halflings-regular.woff
。相对路径解析为
app/bower\u components/bootstrap/dist/font/glyphicons halflings regular.wof
，这非常有效

但是，一旦构建完成，供应商CSS就会合并并缩小为一个CSS文件，位于
dist/styles/8727a602.vendor.CSS
。但是字体的相对路径不会被重写。因此，它尝试在
dist/font
文件夹中查找字体，而不是在文件实际所在的
dist/bower\u components/bootstrap/dist/font/glyphions.wof
文件夹中查找字体

非常感谢您的建议。
您在
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/*'
      ]
    }
  }
},

在这些更改之后再次运行
grunt build
，它应该可以工作。
我找到了一个解决CSS问题的好办法-SCSS内置了图像功能，这将自动重写到资产的路径：

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

带根的cssmin选项替换所有相对路径

您可以在Gruntfile.js中停用cssmin的root选项

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

cssmin:{
选项：{
//根目录：“”
}
},
我遇到了完全相同的问题，我通过以下方法解决了它：

1。将bootstrat字体添加到复制任务中（在Grunfile中）：

{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist’,
 src: ‘fonts/*’,
 dest: ‘<%= yeoman.dist %>/assets/’
}

{
是的，
cwd:'src/main/webapp/bower_components/bootstrap/dist'，
src:'font/*'，
目的地：'/assets/'
}

这将复制dist/assests/fonts文件夹中的引导字体

2。删除cssmin任务或注释掉根参数。这将解决您在路径方面的问题

更多信息，请参见：
我也有同样的问题
grunt build
并没有将glyphicons文件复制到
dist
文件夹中。您的字体解决方案非常成功，但是对于图像，解决方案是使用SASS函数包含图像，并且路径会自动在CSS中重写：.table.sortable th.sorted-asc{背景图像：图像url（'uparrow.png'）；}是的，我知道，对于图像，我的解决方案只是一个短期解决方案，因为我现在不需要更好的解决方案，而且我没有时间……但我肯定会在稍后阶段研究您的解决方案。谢谢！这让我疯狂。值得注意的是，如果您要更改目的地位置，您可能还需要更新您的
$icon font path
在
main.scss
文件中的变量（这会导致
grunt serve
fonts图标失败）。我最终对每个图标使用了以下命令。在main.scss中：
$icon font path:“../bower_组件/sass引导/fonts/”在Grunfile.js:
dest:'/bower_components/sass bootstrap/fonts/“，
看起来这个请求应该可以解决字体问题：。同时，我在使用bootstrap sass official:src:['bower_components/bootstrap sass official/vendor/assets/fonts/bootstrap/*.]这些东西很烦人。如果它们导致未解决的bug，为什么它们会出现在电流发生器中？那么，默认情况下，它们应该被关闭。Yeoman/grunt是非常好的工具，但这些东西让再次使用变得烦人：这对我来说很有用。显然Angular的grunt已经为你构建了一个sass的东西，而你是编写这个工具的人在CSS中引用图像时，Sass需要始终使用
图像url
。
{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist’,
 src: ‘fonts/*’,
 dest: ‘<%= yeoman.dist %>/assets/’
}