Yeoman, How to reference a bower package (font-awesome)?

Question

I'm totally new to Yeoman and I'm facing an issue with it after setting up my project I decided that I want to use font-awesome so I installed it using bower and it works fine

the issue is that font-awesome is not in the dist/bower_components folder but when I reference the css file of font-awesome in the html page like this

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">

it works in the localhost but still no files in dist/bower_components except for requirejs

so how can I tell grunt to copy font-awesome's files to the dist/bower_components folder ?

score 5 · Accepted Answer · answered Jun 21 '13 at 19:52

5

I would use Grunt-Contrib-Copy to copy that folder for you.

answered Jun 21 '13 at 19:52

Adam Simpson

3,591
2
22
27

Seems like a good solution but I want to understand the overall process, shouldn't Yeoman and bower understands the required(used) files and automatically add it to the dist folder ? – Muhammad Saleh Jun 21 '13 at 19:55
5

Bower is just a package manager, it's only job is to pull down what you tell it to. Yeoman, gives you your app structure. Grunt, is the muscle, it moves things for you. So even though you pulled down the font awesome stuff with bower, you still have to tell Grunt to move it for you. – Adam Simpson Jun 21 '13 at 19:59
i have done this also - i was just looking for a little more 'secret sauce' where only the dependencies were copied and not the whole install package. – JSDBroughton Jun 26 '13 at 18:10
1

Then I would use https://github.com/yatskevich/grunt-bower-task It copies only the main files into whatever folder you specify. It's basically a grunt copy but with less manual config. – Martin Hansen Jun 29 '13 at 21:28
@Adam Simpson, Right now i'm using your solution and it works great. but how the latest angular-generator works with bower is that bower installs the libraries to the dev environment and then usemin copies it to vender.js do you think it is best practice to do something similar with the font-awesome's fonts folder? – Urigo Apr 16 '14 at 22:51
@Urigo font-awesome (unless I'm mistaken) is mainly css + fonts, so I would lean towards treating that package like an image or css asset. I would use grunt copy to move it to the built app from the bower_components directory. – Adam Simpson Apr 17 '14 at 13:45

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Also consider using grunt-usemin to help solve this problem.

index.html:

<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="bower_components/library/file.css">
<!-- endbuild -->

It might take a little effort to get this to work, depending on the version of Yo and generator you used to scaffold your application.

Note that the cssmin:dist task has been disabled by default now, and the order of your build sub-tasks should resemble the latest Gruntfile.

The benefit of going this route is you don't have to copy over source files from bower_components. Grunt and Usemin will automatically recognize the block, concatenate the files, then minify them into one new file, as opposed to several.

I think you still have to copy those font files? http://stackoverflow.com/questions/18222339/how-to-use-grunt-usemin-with-font-awesome — vincentlcy, Dec 18 '13 at 07:19

score 1 · Answer 3 · edited May 23 '17 at 12:14

There's a fairly comprehensive discussion of the issue in this stackoverflow answer, but it still took me a while of hacking to get all the steps right.

First if you are using sass, include font-awesome on the top:

$fa-font-path: "../bower_components/font-awesome/fonts";
@import 'font-awesome/scss/font-awesome';

This works were running 'grunt serve' but icons were missing when I ran 'grunt serve:dist'.

For grunt build to dist, add the following in Gruntfile.js under the 'copy' task:

{
  expand: true,
  cwd: '.',
  src: 'bower_components/font-awesome/fonts/*',
  dest: '<%= yeoman.dist %>'
}

Your entire 'copy' task may look something like this (my sample):

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{webp}',
        'fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/font-awesome/fonts/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }]
  },
},

Then 'grunt serve:dist' worked and the icons displayed correctly. Hope this saves someone's time!

Yeoman, How to reference a bower package (font-awesome)?

3 Answers3

index.html:

Linked