CODEWITHSUNDEEP
angularjsgruntjsbower
AlfaTeK
AlfaTeK

Reputation: 7775

How to correctly manage fonts with bower / grunt

On my project I added to my bower.json some projects that use fonts:

Grunt file was mainly generated by "yo angular" with some custom edits. Fonts work just fine in "grunt serve" development mode but don't work when I do my dist build with "grunt".

The problem is that fonts aren't copied to my dist folder. To fix that I manually changed my Gruntfile to copy:dist all my fonts. Like this:

{
    expand: true,
    cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",
    dest: "<%= yeoman.dist %>/fonts",
    src: ["*.*"]
}

My problem now is that all my libraries CSS expect the fonts to be on a specific folder ( roboto-fontface and bootstrap for example expect the font to be in different folders).

So I'll have to change my gruntfile to replace the fonts reference on the *.css files to target the right paths. I don't know yet how to do this but my main itch is that this seems very "hacky"

Bower works very well with my css files: they are automatically added to index.html and their href is correctly replaced when doing my dist build. For example I can upgrade my ng-grid project without problems, remove and add new projects. I believe that works because of the bower.json file on the ng-grid project that contains

  "main": ["./ng-grid.css", "./build/ng-grid.js"]

Grunt is correctly configured to understand that and add it to my index.html.

But for fonts it seems the only solution is to to modify my gruntfile to add copy:dist and then some kind of regex replacement on my *css files. But, for example, the roboto-fontface project bower.json file also seems to have a good "main" where all the fonts are listed besides the css file.

For me it seems logical that I should be able to configure my Gruntfile so that it understands that the "main" parameter has fonts and automatically copies them to my dist/ and replaces my css files with the correct path.

When I add a new font to my project I'll have to edit my Gruntfile, also when I remove/update fonts.

So, the question is simple: how can I best manage my project fonts? What are the best practices? How are the 'cool kids' doing it?

Upvotes: 6

Views: 1659

Answers (1)

yvesmancera
yvesmancera

Reputation: 2925

I ran into this issue a few weeks ago, I also used yeoman-angular-generator and had to tweak the copy:dist as well.

In my project I was using 3 separate fonts, font-awesome, lato and open-sans. I added font-awesome via bower but the other 2 I manually downloaded them and placed them under app/fonts

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
        //any new font you drop under app/fonts will be copied to dist
        'fonts/**'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome',
      src: ['fonts/*.*'],
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},
//rest of Gruntfile...

Hope this helps!

Upvotes: 0

Related Questions