Yeoman，如何引用凉亭包（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">

它在localhost中工作，但除了requirejs之外，dist / bower_components中仍然没有文件

那么如何告诉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任务，并且构建子任务的顺序应类似于最新的Gruntfile 。

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

Answer 3

这个stackoverflow答案中有一个相当全面的讨论问题，但是我仍然需要一段时间才能完成所有步骤。

首先，如果你使用sass，请在顶部包含font-awesome：

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

这项工作正在运行'咕噜咕噜'，但当我跑'grunt serve：dist'时，图标丢失了。

对于grunt build to dist，在'copy'任务下的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'工作，图标显示正确。 希望这能节省一些人的时间！