Why does Yeoman build without glyphicons? - deployment

Question

I'm working on a webapp generator and after running grunt I got a functional app which display fonts correctly. However, when I check in the dist/ directory I don't get any fonts files.
The docs state that grunt command build the application for deployment, but the dist/ directory isn't autonomous.
Gruntfile.js config
My copy:dist task is as follow:
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}',
'styles/fonts/{,*/}*.*'
]
}]
},
So it does copy font, but not the glyphicons one which is in bower_components/sass-bootstrap/dist/fonts/
Build content
Here is all I got after running grunt build
./dist
├── 404.html
├── favicon.ico
├── index.html
├── robots.txt
├── scripts
│   ├── coffee.js
│   ├── plugins.js
│   ├── vendor.js
│   └── main.js
└── styles
└── main.css
Question
So how do I create a deployment directory containing all files and resources ?

Answer 1

yeoman 1.1.2 does not seem to work with the answer above.
Change your Gruntfile.js and add:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'bower_components/**/*',
'images/{,*/}*.{webp}',
'fonts/*',
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, { <--- add this start
expand: true,
cwd: '<%= yeoman.app %>/bower_components/bootstrap/fonts',
dest: '<%= yeoman.dist %>/fonts',
src: '*.*'
}] <--- end add
},
styles: {
Add a new block that copies the fonts out of the bower components into the dist directory.
Replace bootstrap with sass-bootstrap if you use the sass distribution.

Answer 2

The bug Sindre mentioned has now been fixed. You can either start a new project with generator-webapp >= 0.4.2 or apply this patch manually, which only involves one new line to the copy task:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%%= yeoman.app %>',
dest: '<%%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}',
'styles/fonts/{,*/}*.*',
'bower_components/sass-bootstrap/fonts/*.*' // <-- New line
]
}]
}
}

Answer 3

That's a bug. For now the easiest would be to just copy them manually over to the fonts folder.

Answer 4

Copy fonts from app/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap
To app/fonts
In application.scss change $icon-font-path
From
$icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/"
To
$icon-font-path: "/fonts/"

Answer 5

cssmin with root option replaces all relative paths.
you can deactivate the root option of cssmin in your Gruntfile.js
cssmin: {
options: {
//root: '<%= yeoman.app %>'
}
},

Answer 6

It worked for me ;)
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'**/*.html',
'views/**/*.html',
'images/{,*/}*.{webp}',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
},
{
expand: true,
cwd: '<%= yeoman.app %>/bower_components/bootstrap/fonts',
dest: '<%= yeoman.dist %>/fonts',
src: '*.*'
},
{
expand: true,
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts',
dest: '<%= yeoman.dist %>/fonts',
src: '*.*'
}
/*{
expand: true,
cwd: 'bower_components/bootstrap/dist',
src: 'fonts*//*',
dest: '<%= yeoman.dist %>'
}*/]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},