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 ?
I would use Grunt-Contrib-Copy to copy that folder for you.
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.
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!