Grunt (Yeoman, Grunt-usemin, Grunt-rev): The "changed" font path is not reflected in my .CSS?

Question

Background

I am using Yeoman webapp to help my interface. Inside the grunt file, they use grunt-rev and grunt-usemin

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

---

Problem

I have a webfont that I use. I put the fonts folder in my styles directory as indicated in the gruntfile.js file ('styles / fonts /{,/►.*'). The Grunt service shows my fonts correctly, but after I built the file, it no longer works, because font filename has a prefix with some strange gibberish characters. for example: 63b122ab.fontname.ttf instead of fontname.ttf

This is for busting the cache. But my .css file does not update the path to raise it.

In my usemin block inside gruntfile.js

What should I do? I have it now, but it does not work.

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

It collects everything else, but not fonts. I manually created a font folder. Therefore, I assume that the gruntfile.js file should be updated to reflect this change.

Answer 1

I had the same problem with grunt in a css file. I changed the usemin configuration in Gruntfile.js as follows:

 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'] ] } } }