使用 grunt 构建项目时，Fontawesome 无法正常工作答案

【问题标题】：Fontawesome is not working when project is built with grunt使用 grunt 构建项目时，Fontawesome 无法正常工作
【发布时间】：2014-02-14 03:09:16
【问题描述】：

我正在使用字体库字体很棒。当项目没有使用 grunt 构建/丑化时，它可以工作。

但是当我用 grunt 构建项目时，它不起作用。我在控制台中收到此错误：.../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)

我已经用 yeoman 搭建了这个项目。

这是我在 index.html 中的参考

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

有什么想法可能是错的吗？

更新我需要将文件夹 /bower_components/font-awesome/fonts 复制到 dist/fonts。这需要在 grunt 文件中完成。可能在“复制”选项下

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

但我不确定在哪里包含此内容。

【问题讨论】：

首先，需要 Gruntfile 中的相关行来提供帮助。其次，HTML snipped 和 'yeoman' 标签表明您正在使用 grunt-usemin，它还会生成一些配置，因此如果为真，请务必包含该配置。最后，Fontawesome 对目录结构有期望吗？如果是这样，您是否设置了输出配置来适应这种情况？

标签： angularjs gruntjs yeoman font-awesome

【解决方案1】：

如果您使用的是来自 yeoman 的完整 grunt 任务堆栈，那么 useminPrepare 任务会根据您在 build:css 注释中放置的所有样式表构建一个组合样式表 - 就像您所做的那样。（有关更多信息，请参阅https://github.com/yeoman/grunt-usemin）构建过程完成后，此文件 - 有点像“vendor.234243.css”被复制到样式文件夹。这就是为什么您的字体路径不再有效的原因。解决这个问题至少有两种可能性：

您可以从 build:css 块中删除 font-awesom css：

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- build:css styles/fontawesome.css -->
 this will be processed by useminPrepare 
<!-- endbuild -->

通过 gruntfile 中的附加 grunt 任务将字体 folder 作为同级复制到 styles 文件夹。

【讨论】：

出于某种原因，选项 2）作为同级文件夹对我不起作用。理解你为什么建议它，因为它非常有意义。但是，选项 1) 只是将其排除在外并在复制 grunt 任务中添加另一个目标以将其移动到工作中 - 因此，如果引用 font-awesome 的缩小版本无论如何这是一个很好的解决方案。谢谢！浪费了太多时间尝试巧妙的方法来处理这个问题。毕竟最简单的方法是正确的。
对我来说，它使用了第二种方法，创建了一个 grunt 任务，它将字体文件夹复制为样式文件夹的兄弟。

【解决方案2】：

如果您在项目中使用 SASS，我发现了一种更直接的方法，如果有人感兴趣，无需更改 grunt 文件：

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

基本上将这两行包含在 main.scss 文件的顶部，字体应该可以工作。

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

【讨论】：

谢谢，这解决了我使用 angular-fullstack 生成器丢失字体的问题。
这是一个很好的答案。部署应用程序时如何将字体文件夹复制到 dist 中？你是用copy task还是usemin task还是别的什么？
@Urigo ，@vegas-dev 在他的回答中说：more straightforward way that doesn't involve changing the grunt fileso 不必更改 Gruntfile.js 文件中的文件。
这应该是答案。上面的“答案”不适用于较新的 yeoman 发行版。 grunt 完全没有变化
最新的 yeoman angularjs 已经写了 @import 行，所以我添加的唯一行是 $fa-font-path

【解决方案3】：

这会将字体复制到您需要的位置。

copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                dot: true,
                cwd: 'app/bower_components/fontawesome/fonts/',
                src: ['*.*'],
                dest: '<%= yeoman.dist %>/fonts'
            }]
        },

【讨论】：

【解决方案4】：

我遇到了同样的问题。下面的代码解决了我的问题。

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}

【讨论】：

我只需要将 config.dist 替换为 yeoman.dist 就可以了！
是的，我遇到了同样的问题。这应该是 yeoman.dist 而不是 config.dist。我认为这可能与 yeoman 更新有关。
@Ryan 我很确定 yeoman.dist 与 config.dist 只是 grunt 文件中定义的名称。该名称是可配置的，请参阅此线程：stackoverflow.com/a/21422161/736967
我的 fontawesome 安装没有破折号，所以它最终成为 cwd: 'bower_components/fontawesome'

【解决方案5】：

执行此操作的最简单方法是转到您自己的 bower.json 并添加一个 overrides 属性。

{
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

您必须手动将 fontawesome/fonts 文件夹中的字体复制到您的 app/fonts 文件夹中。无需编辑 Gruntfile 或 SCSS 或其他任何要求。

【讨论】：

我也采用了这种方法，但是在 CSS 中的路径从原始 app/bower_components/font-awesome/css/font-awesome.css 中的“../fonts/etc”改变了到结果 dist/styles/xxx.vendor.css 中的“/bower_components/font-awesome/fonts/etc”。有人知道为什么吗？
我遇到了同样的问题。在这里查看我的答案：stackoverflow.com/questions/23587597/…

【解决方案6】：

我能够通过将以下内容添加到 copy.dist.files 来解决问题：

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}

【讨论】：

【解决方案7】：

我不知道我做错了什么，但没有一个建议的解决方案对我有用。无论我尝试什么，生产（分发）版本都不会显示图标。

我最终使用了以下组件：https://github.com/philya/font-awesome-polymer-icons-generator 和 https://github.com/philya/font-awesome-polymer-icons

font-awesome-polymer-icons-generator

注意：需要python

它允许您为项目中的图标（您正在使用的）生成字体很棒的 SVG 图标集。

例如，假设我想要在我的项目中使用图标 code, line-chart, github-alt，然后我会像这样生成它们：

./makefaicons.py myappname code line-chart github-alt

这会生成文件build/myappname-icons.html。然后这个文件需要像任何其他组件一样导入到我的组件中：

<link rel="import" href="<pathToFile>/myappname-icons.html">

然后我可以得到像这样的字体真棒图标：

<core-icon icon="myappname:line-chart"></core-icon>

即我用创建图标集时给的名称作为正常字体真棒名称的前缀。

字体真棒聚合物图标

您也可以只导入预先构建的全套字体真棒图标：

bower install font-awesome-polymer-icons

请记住，这会使您的发行版大小增加 300+KB，并且作者指出不建议将其用于生产用途。

【讨论】：

【解决方案8】：

我的解决方案是采用 CDN 方法：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

由于某种原因，所有答案都不起作用。

【讨论】：

【解决方案9】：

正如上面回答的那样，这对我也很有效

 // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }

【讨论】：

【解决方案10】：

如果您正在使用 SailsJS 和 Bower，我已经制定了一个解决方案来修复 Fontawesome 和 Bootstrap 字体问题。

确保您的tasks/config/bower.js 类似于：https://gist.github.com/robksawyer/fc274120aef9db278eec
添加了 npm 模块grunt-remove。
在tasks/config 中创建remove.js 文件：https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
更新文件tasks/register/compileAssets:https://gist.github.com/robksawyer/fa04a34ea103bead1c61
将tasks/config/copy.js 文件更新为：https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

【讨论】：

【解决方案11】：

我已将 Gruntfile.js 编辑如下：

//...
copy: {
  dist: {
    files: [//... {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.dist %>/fonts'
    }]
  },
  app: {
    files: [{
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.app %>/fonts'
    }]
  }, //...
}
//...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'copy:app', // Added this line
    'concurrent:server',
    'autoprefixer:server',
    'connect:livereload',
    'watch'
  ]);
});

我正在使用 yeoman 1.4.7 及其角度生成器。添加 copy:app 而不仅仅是 copy:dist 任务非常重要（如上所述）。如果您在输入 grunt serve 时不包含 copy:app ，它将无法正常工作。使用 copy:dist 你只考虑grunt serve:dist

【讨论】：

【解决方案12】：

我遇到了同样的问题。我查看了 font-awesome 的 bower.json 文件，发现了这个：

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

“main”数组中没有对“font-awesome.css”的引用。也许，像我一样，您没有使用 SASS 或 LESS 进行样式设置。因此，没有为 font-awesome 添加任何样式。我修改了json文件如下：

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css",
    "fonts/fontawesome-webfont.tff",
    "fonts/fontawesome-webfont.woff",
    "fonts/fontawesome-webfont.woff2"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

我保存并运行了 grunt serve，现在我的字体很棒的图标出现了。

希望这会有所帮助。

【讨论】：

【解决方案13】：

对于那些使用Google App Engine 的人，以下内容对我有用：

添加到Gruntfile.js:

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

我正在使用 LESS，因此我通过将其添加到我的 main.less 文件中导入了 font-awesome.less。

@import '../../vendor/components-font-awesome/less/font-awesome.less';

然后我将此添加到我的 app.yaml 文件中。

handlers:
- url: /fonts
  static_dir: static/fonts

【讨论】：

【解决方案14】：

这里是解决方案：https://stackoverflow.com/a/32128931/3172813

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}

【讨论】：

【解决方案15】：

您好，主要问题是 font-awesome css 所需的字体文件在您运行 grunt 任务后不会被复制，您可能会收到 404 not found 错误，如果您打开 chrome 开发人员模式和查看控制台或网络选项卡。 bootstrap 也可能出现同样的问题。

因此我们需要修改 grunt 任务以便复制所有字体文件。

为字体文件添加单独的复制任务。

copy: {
  dist: { .....

  },
   fonts: {
    expand: true,
    flatten: true,
    cwd: '.',
    src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'],
    dest: '<%= yeoman.dist %>/fonts',
    filter: 'isFile'
  },
  styles: { .......
  }
}

在 grunt.registerTask 中注册 'copy:fonts' 任务，以便在构建时执行。

【讨论】：