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

【问题标题】：Assets missing in Angular application built using grunt使用 grunt 构建的 Angular 应用程序中缺少资产
【发布时间】：2014-02-21 10:56:43
【问题描述】：

我已经使用 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 插件的字体存在问题。 app/bower_components/bootstrap/dist/css/bootstrap.css 的引导 CSS 引用 ../fonts/glyphicons-halflings-regular.woff。相对路径被解析为app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof，并且效果很好。

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

非常感谢任何建议。

【问题讨论】：

和我一样的问题。 grunt build 没有按照应有的方式将 glyphicons 文件复制到 dist 文件夹。

标签： angularjs gruntjs yeoman bower

【解决方案1】：

您正面临着 build 任务的 Yeoman 错误，这些错误尚未修复。我相信没有干净的解决方案，所以这里有一些解决方法。

首先，图片版本：

只需从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 任务中添加一条新规则：

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/*.*']
    }]
  },
  ...
}

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

【讨论】：

您的字体解决方案是正确的，但事实证明，对于图像，解决方案是使用 SASS 函数来包含图像，并且路径会在 CSS 中自动重写：.table.sortable th。 sorted-asc { 背景图像：图像 url('uparrow.png'); }
是的，我知道，对于图像，我的解决方案只是一个短期解决方案，因为我目前不需要更好的解决方案而且我没有时间......但我一定会研究你的解决方案在稍后阶段。
谢谢！这让我发疯了。值得注意的是，如果您要更改目标位置，您可能还需要更新main.scss 文件中的$icon-font-path 变量（这会导致grunt serve fonts-icons 失败）。我最终为每个使用了以下内容。在 main.scss：$icon-font-path: "../bower_components/sass-bootstrap/fonts/"; 和在 Gruntfile.js：dest: '<%= yeoman.dist %>/bower_components/sass-bootstrap/fonts/',
看起来这个拉取请求应该解决字体问题：github.com/yeoman/generator-angular/pull/661。同时，在使用 bootstrap-sass-official 时，我必须使用 src 的以下路径： src: ['bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/*.*']
这些东西很烦人。如果它们导致未解决的错误，为什么它们会在当前的生成器中？然后，默认情况下它们应该被关闭。 Yeoman / grunt 是很好的工具，但是这些东西让再次使用很烦人：s

【解决方案2】：

我找到了一个解决 CSS 问题的好方法 - SCSS 具有内置的图像功能，这将自动重写资源的路径：

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

【讨论】：

这对我有用。显然，Angular 的 grunt 已经为它构建了一个 sass 的东西，而你作为编写 Sass 的人需要在 CSS 中引用图像时始终使用image-url。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我遇到了完全相同的问题，我通过以下方式解决了它：

1. 将引导字体添加到复制任务（在 gruntfile 中）：

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

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

2. 删除cssmin任务或注释掉root参数。那应该可以解决您在路径方面的问题。

欲了解更多信息，check this post which includes a deep explanation：

【讨论】：