可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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'
}
},