Question

在使用包含字体真棒的grunt分发项目时遇到任何问题？

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

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

应用程序/ LIB /字体真棒/ CSS /字体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'
      ]

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

由于

Answer 1

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

Answer 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会将字体很棒的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文件夹。

Famo.us和Font-Awesome

2 个答案: