Question

背景

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

Grunt-rev将“重新启动”我的资产，而grunt-usemin将更新资产路径。

问题

我有一个我正在使用的webfont。我将fonts文件夹放在我的样式目录中，如gruntfile.js（'styles / fonts /{,/}.*'）中所述.Grunt服务正在显示我的字体但是在我构建文件后，它不再有效，因为font filename以一些奇怪的乱码字符作为前缀。例如：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']
},

它正在拾取其他所有内容，但不是字体。我手动创建了fonts文件夹。所以我猜测必须更新gruntfile.js以反映更改。

Answer 1

我在css文件中遇到了与grunt相同的问题。我改变了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']
      ]
    }
  }
}

Grunt（Yeoman，Grunt-usemin，Grunt-rev）：“rev'ed”字体路径没有反映在我的.CSS中？

1 个答案: