Yeoman，如何引用一个Bower包（font-awesome）？

Question

我完全不了解Yeoman，我在使用它时遇到了问题。在设置好项目后，我决定使用font-awesome，所以我使用bower进行安装，这样它就能正常工作。

问题在于，font-awesome不在dist/bower_components文件夹中，但是当我在html页面中引用font-awesome的css文件时，就像这样：

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">

我的本地环境可以运行，但dist/bower_components文件夹里除了requirejs以外没有其他文件。

那么我该如何告诉grunt将font-awesome的文件复制到dist/bower_components文件夹中呢？

- Muhammad Saleh

Answer 1

我会使用 Grunt-Contrib-Copy 来为您复制那个文件夹。

- Adam Simpson

---

看起来是个不错的解决方案，但我想了解整个过程，难道 Yeoman 和 bower 不应该理解所需（已使用）的文件并自动将其添加到 dist 文件夹中吗？ - Muhammad Saleh

Bower只是一个包管理器，它的唯一工作就是下载你指定的内容。Yeoman会为你创建应用程序的结构。Grunt是它的核心，它可以帮你搬运东西。因此，即使你使用Bower下载了font awesome，你仍然需要告诉Grunt来为你移动它。 - Adam Simpson

我已经完成了这个 - 我只是在寻找更多的“秘密酱”，只复制依赖项而不是整个安装包。 - JSDBroughton

然后我会使用 https://github.com/yatskevich/grunt-bower-task 它只会将主文件复制到您指定的任何文件夹中。它基本上是grunt copy，但手动配置较少。 - Martin Hansen

@Adam Simpson，目前我正在使用您的解决方案，它运行良好。但是最新的angular-generator如何与bower配合工作是，bower将库安装到开发环境中，然后usemin将其复制到vender.js中。您认为是否最好采用类似的方式处理font-awesome的字体文件夹？ - Urigo

@Urigo 如果我没记错的话，font-awesome 主要是由 CSS 和字体文件组成的，所以我倾向于将这个包视为图像或 CSS 资源。我会使用 Grunt copy 将它从 bower_components 目录移动到构建应用程序中。 - Adam Simpson

Answer 2

还可以考虑使用 grunt-usemin 来帮助解决这个问题。

index.html:

<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="bower_components/library/file.css">
<!-- endbuild -->

这可能需要一些努力才能使其正常工作，具体取决于你用来脚手架应用程序的Yo和生成器的版本。

请注意，cssmin:dist任务现在已经默认禁用，你的构建子任务的顺序应该类似于最新的Gruntfile。

这样做的好处是你不必复制中的源文件。Grunt和Usemin会自动识别该块，将文件连接起来，然后将它们压缩成一个新文件，而不是几个文件。

- Stephen

---

我认为你仍然需要复制那些字体文件吗？ - vincentlcy

Answer 3

在这个stackoverflow答案中有一个相当全面的讨论，但我仍然花了一些时间来hack，以确保所有步骤都正确。

如果您正在使用sass，请在顶部包含font-awesome：

$fa-font-path: "../bower_components/font-awesome/fonts";
@import 'font-awesome/scss/font-awesome';

这段文字是关于编程的，翻译如下：

在运行 'grunt serve' 时正常工作，但在运行 'grunt serve:dist' 时图标丢失。

要在 grunt 构建到 dist 目录中，需要在 Gruntfile.js 文件的 'copy' 任务下添加以下内容:

{
  expand: true,
  cwd: '.',
  src: 'bower_components/font-awesome/fonts/*',
  dest: '<%= yeoman.dist %>'
}

您的整个“复制”任务可能如下所示（我的示例）：

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

然后运行 'grunt serve:dist'，图标正常显示。希望这能节省某人的时间！

- Xuwen