3

我对 Yeoman 完全陌生，在设置项目后我遇到了一个问题

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

4

3 回答 3

5

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

于 2013-06-21T19:52:45.157 回答
2

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

索引.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 将自动识别块，连接文件，然后将它们缩小为一个新文件，而不是多个文件。

于 2013-06-26T18:11:43.460 回答
1

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

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

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

这项工作正在运行“grunt serve”，但是当我运行“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' 工作并且图标显示正确。希望这可以节省某人的时间！

于 2014-09-13T06:27:00.530 回答