Why does Yeoman build without glyphicons?

问题:

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 ?

回答1:

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                 ]             }]         }     }

回答2:

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.

回答3:

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

回答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/"

回答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 %>'   } },

回答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'   } },

转载请标明出处:Why does Yeoman build without glyphicons?

文章来源: Why does Yeoman build without glyphicons?