Grunt (Yeoman, Grunt-usemin, Grunt-rev): The “rev'ed” font path isn't reflected in my .CSS?

Question

Background

I am using Yeoman webapp to scaffold my frontend. Within the gruntfile, they are using grunt-rev and grunt-usemin

Grunt-rev will "rev'ed" my assets and grunt-usemin will update the asset path.

Problem

I have a webfont that I am using. I placed the fonts folder in my styles directory as mentioned in the gruntfile.js ( 'styles/fonts/{,/}.*' ) Grunt serve is showing my fonts properly but after I built the file, it no longer works because the font filename has been prefixed with some weird gibberish characters. eg: 63b122ab.fontname.ttf instead of fontname.ttf

This is for cache busting. But my .css file isn't updating the path to pick it up.

In my usemin block within gruntfile.js

What should I do? I have this currently but it is not working.

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

It is picking up everything else but not the fonts. I manually created the fonts folder. So I am guessing the gruntfile.js has to be updated to reflect the change.

Did you figure this one out? I am faced with the same problem. — Lowkase
@Lowkase The only way to get pass this is to just uncomment the line that rev the fonts within grunt-rev. Rev everything but not the fonts. — Vennsoh
I also have this problem. Removing '<%= yeoman.dist %>/styles/fonts/*' inside the filerev -> dist -> srv object helps but thats not what I want. Any other ideas on this? I'm using the sass font helper font-url, but that also doesn't help. — 23tux
@23tux I have logged a help on github. And it is said it has been solved and they close the bug. So maybe try updating to the latest yeoman and try it again? — Vennsoh

eyupaltindal eyupaltindal · Accepted Answer · 2016-04-07T14:01:55

I had the same problem with grunt in css file. I changed the usemin config in Gruntfile.js like this:

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): The “rev'ed” font path isn't reflected in my .CSS?

1 Answers