angularjs - 使用 grunt 构建的 Angular 应用程序中缺少 Assets

Question

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

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

首先，运行 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 处的 bootstrap 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 中查找字体事实上是。

非常感谢任何建议。

Answer 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，它应该可以工作。