Question

我使用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。

任何建议都非常感谢。

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文件夹。我花了几个小时在这个bug上，找不到合适的解决方案。最后，我决定在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，它应该可以正常工作。

Answer 2

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

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

Answer 3

带有root选项的

cssmin将替换所有相对路径。

您可以在Gruntfile.js

中停用cssmin的root选项

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

Answer 4

我有完全相同的问题，我解决了它：

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

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

这将复制dist / assests / fonts文件夹中的bootstrap字体。

2. 删除cssmin任务或注释掉root参数。这应该解决你的路径问题。

有关详细信息，请check this post which includes a deep explanation：

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

4 个答案: