javascript Yeoman，如何引用凉亭包（字体真棒）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17242178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Yeoman, How to reference a bower package (font-awesome)?
提问by Muhammad Saleh
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
我对 Yeoman 完全陌生，在设置我的项目后我遇到了一个问题
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
问题是 font-awesome 不在 dist/bower_components 文件夹中，但是当我像这样在 html 页面中引用 font-awesome 的 css 文件时
<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
它在 localhost 中工作，但在 dist/bower_components 中仍然没有文件，除了 requirejs
so how can I tell grunt to copy font-awesome's files to the dist/bower_components folder ?
那么我如何告诉 grunt 将 font-awesome 的文件复制到 dist/bower_components 文件夹？
回答by Adam Simpson
I would use Grunt-Contrib-Copyto copy that folder for you.
我会使用Grunt-Contrib-Copy为您复制该文件夹。
回答by Stephen
Also consider using grunt-useminto help solve this problem.
还可以考虑使用grunt-usemin来帮助解决这个问题。
index.html:
索引.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 Yoand generator you used to scaffold your application.
可能需要一些努力才能使其工作，具体取决于Yo您用于构建应用程序的版本和生成器。
Note that the cssmin:disttask has been disabled by defaultnow, and the order of your build sub-tasks should resemble the latest Gruntfile.
请注意，该cssmin:dist任务现在已默认禁用，并且您的构建子任务的顺序应类似于最新的 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.
走这条路线的好处是您不必从 bower_components 复制源文件。Grunt 和 Usemin 将自动识别块，连接文件，然后将它们缩小为一个新文件，而不是几个。
回答by Xuwen
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.
在这个 stackoverflow answer 中有一个关于这个问题的相当全面的讨论，但我仍然花了一段时间的黑客来完成所有步骤。
First if you are using sass, include font-awesome on the top:
首先，如果您使用的是 sass，请在顶部包含 font-awesome：
$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'.
这项工作正在运行“grunt serve”，但是当我运行“grunt serve:dist”时图标丢失了。
For grunt build to dist, add the following in Gruntfile.js under the 'copy' task:
要将 grunt 构建到 dist，请在 Gruntfile.js 中的“复制”任务下添加以下内容：
{
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!
然后 'grunt serve:dist' 工作并且图标显示正确。希望这可以节省某人的时间！
