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

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就会合并并缩小为一个CSS文件dist/styles/8727a602.vendor.css.但是,字体的相对路径不会被重写.所以它试图在dist/fonts文件夹中查找字体,而不是dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof文件的实际位置.

任何建议都非常感谢.

Answer 1

你正面临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文件夹.我花了几个小时在这个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在这些更改后再次运行它应该可以工作.