Yeoman，如何引用凉亭包（字体真棒）？

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 文件夹？

Answer 1

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

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 任务现在已经是disabled by default，你的构建子任务的顺序是should resemble the latest Gruntfile。

走这条路的好处是你不必从 bower_components 复制源文件。 Grunt 和 Usemin 会自动识别块，连接文件，然后将它们压缩成一个新文件，而不是几个。

Answer 3

this stackoverflow answer 对这个问题进行了相当全面的讨论，但我仍然花了一些时间来破解所有步骤。

首先，如果您使用的是 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 中的“复制”任务下添加以下内容：

{
  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' 工作并且图标显示正确。希望这可以节省别人的时间！