1

任何人在分发带有 grunt 的项目时遇到问题，包括字体真棒？

我的问题是，在“dist”文件夹内的最终分发项目中，我想念字体真棒......

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

应用程序/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 时，它似乎找不到正确的路径，我看不到任何图标。

谢谢

4

2 回答 2

0

鉴于您在 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 文件夹。

于 2014-05-20T22:06:53.843 回答
0

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

于 2014-05-14T15:55:11.467 回答