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 ?

Solution 1

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

Solution 2

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.

Solution 3

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!