Famo.us 和 Font-Awesome答案

【问题标题】：Famo.us and Font-AwesomeFamo.us 和 Font-Awesome
【发布时间】：2014-06-24 10:06:32
【问题描述】：

任何人在使用 grunt 分发项目时遇到问题，包括 font awesome？

我的问题是，在“dist”文件夹中的最终分发项目中，我错过了 font-awesome...

我项目中的Font-Awesome文件夹位于：

app/lib/font-awesome/css/font-awesome.min.css

到目前为止我做了什么：我试图像这样编辑 copy.js（在 grunt 文件夹中）：

src: [
        '**/**.{ico,png,gif,txt,jpg,svg,wof,ttf}',
        '.htaccess',
        //'images/{,*/}*.webp',
        //'content/{*.*,*/}*.*',
        'content/{,*/}/{,*/}/*.*',
        // '{,*/}*.html',
        'styles/fonts/{*.*,*/}*.*',
        'lib/famous/**/**.css',
        'lib/font-awesome/{,*/}/**.css'
      ]

.. 也分发 font-awesome，现在它在 dist 文件夹中，但是当我打开 index.html 时，它似乎无法找到正确的路径，我看不到任何图标。

谢谢

【问题讨论】：

您是否在 index.html 文件中直接尝试了链接标签？

标签： gruntjs font-awesome famo.us

【解决方案1】：

为了简化一切并加快加载速度，您只需链接到 CDN 托管版本的 Font Awesome。 BootstrapCDN 将为您服务：http://www.bootstrapcdn.com/#fontawesome_tab

【讨论】：

【解决方案2】：

鉴于您已经在 index.html 中找到了这个：

    <!-- build:css(app/) css/app.css -->
    <link rel="stylesheet" type="text/css" href="content/vendor/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="styles/app.css" />
    <!-- bower:css -->

Grunt 会将字体 awesome css 放在 dist/css 中。问题是 font-awesome 正在寻找相对于这个文件 (../fonts) 的字体，并且在构建过程中字体没有随着 css 移动。所以，改变你的 grunt/copy.js 文件来为你做这件事：

// Copies remaining files to places other tasks can use
module.exports = {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= config.app %>',
      dest: '<%= config.dist %>',
      src: [
        '**/**.{ico,png,txt,jpg,svg,wof,ttf}',
        '.htaccess',
        'images/{,*/}*.webp',
        // '{,*/}*.html',
        'styles/fonts/{,*/}*.*',
        'lib/famous/**/**.css'
      ]
    },
    // add this, making sure the path is correct to your fonts
    {
        expand: true,
        dot: true,
        cwd: '<%= config.app %>/content/vendor/font-awesome/fonts/',
        src: ['*.*'],
        dest: '<%= config.dist %>/fonts'

    }]
  }
};

再次运行 grunt，dist 文件夹现在应该包含一个 fonts 文件夹。

【讨论】：