gruntjs - Grunt (Yeoman, Grunt-usemin, Grunt-rev) : The "rev' ed"font path isn't reflected in my . CSS？

Question

背景

我正在使用 Yeoman webapp 来搭建我的前端。
在 gruntfile 中，他们使用 grunt-rev 和 grunt-usemin

Grunt-rev 将“修改”我的 Assets ，而 grunt-usemin 将更新 Assets 路径。

问题

我有一个正在使用的网络字体。我将 fonts 文件夹放在我的样式目录中，如 gruntfile.js ( 'styles/fonts/{,/}.*' ) Grunt serve 正确显示我的字体，但在我构建文件后，它不再工作，因为字体文件名以一些奇怪的乱码字符为前缀。例如:63b122ab.fontname.ttf 而不是 fontname.ttf

这是用于缓存破坏。
但是我的 .css 文件没有更新路径来获取它。

在 gruntfile.js 中的 usemin 块中

我该怎么办？我目前有这个，但它不起作用。

usemin: {
  options: {
    assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles/fonts']
  },
  html: ['<%= config.dist %>/{,/}.html'],
  css: ['<%= config.dist %>/styles/{,/}.css']
},

它正在拾取其他所有内容，但不拾取字体。我手动创建了字体文件夹。所以我猜 gruntfile.js 必须更新以反射(reflect)变化。

Answer 1

我在 css 文件中遇到了同样的问题。我像这样更改了 Gruntfile.js 中的 usemin 配置:

usemin: {
  html: ['<%= yeoman.dist %>/<%= yeoman.client %>/{,!(bower_components)/**/}*.html'],
  css: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.css'],
  js: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>/<%= yeoman.client %>',
      '<%= yeoman.dist %>/<%= yeoman.client %>/assets/images'
    ],
    // This is so we update image and font references in our ng-templates
    patterns: {
      js: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
      ],
      css: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images'],
        [/(assets\/fonts\/.*?\.(?:woff|ttf|svg|eot))/gm, 'Update the CSS to reference our revved fonts']
      ]
    }
  }
}