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'工作，圖標顯示正確。 希望這能節省一些人的時間！