在jekyll项目中使用FontAwesome与grunt和bower

时间：2014-07-01 08:00:17

标签： gruntjs jekyll bower

我试图在我的jekyll项目中使用FontAwesome。我使用自耕农（generator-jekyllrb）生成它，我使用Grunt和Bower。我使用bower安装了字体：bower install fontawesome它已安装在我的app/_bower_components目录中。我的问题是如何访问它？这是app/_bower_components/fontawesome目录中的内容：

fontawesome
├── css
│   ├── font-awesome.css
│   └── font-awesome.min.css
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   └── fontawesome-webfont.woff
├── less
│   └── ...
└── scss
    └── ...

在app/_bower_components/fontawesome/css/font-awesome.css我有这个：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

在我的html文件中，我有这个：

<!-- build:css({app,.tmp}) /css/main.css -->
<!-- Syntax highlighting CSS -->
<link rel="stylesheet" href="/_bower_components/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/syntax.css">
<link rel="stylesheet" href="/css/main.css">
<!-- endbuild -->

当我在本地尝试它时一切正常，但是，当我将它构建到静态站点时，我找不到404，因为没有目录fonts（grunt缩小并将所有.css文件合并为一个并且没有使用字体本身制作fonts目录：

dist
├── 404.html
├── css
│   └── main.0df9.css
├── img
│   └── okay.d42b.png
├── index.html
├── jekyll
│   └── update
│       └── 2014
│           └── 06
│               └── 16
│                   ├── test-first-post.html
│                   ├── welcome-to-jekyll.html
│                   └── yo-jekyllrb.html
├── js
│   └── scripts.472f.js
└── search.json

如果我将字体文件复制到我的app/fonts（我认为这不是最好的方法）它也不起作用，因为grunt更改了他们的名字。那么，我该怎么办？

如果您需要，请点击Gruntfile。

我还尝试将fontawesome目录添加到我的Gruntfile中（第270行）：

dist: {
  files: [{
    expand: true,
    dot: true,
    cwd: '<%= yeoman.app %>',
    src: [
      // Jekyll processes and moves HTML and text files.
      // Usemin moves CSS and javascript inside of Usemin blocks.
      // Copy moves asset files and directories.
      'img/**/*',
      'fonts/**/*',
      // Like Jekyll, exclude files & folders prefixed with an underscore.
      '!**/_*{,/**}',
      // Explicitly add any files your site needs for distribution here.
      // '_bower_components/jquery/jquery.js',
      //'favicon.ico',
      //'apple-touch*.png'
    ],
    dest: '<%= yeoman.dist %>'
  }]
},

它工作得非常好，它会生成一个工作静态网站但是当我部署它时（我使用的是GitHub页面）它只是在_bower_components目录中找不到任何内容。

2 个答案:

答案 0 :(得分：0)

您需要从/app/css/main.css创建对fontawesome css的导入，以便它将包含在已编译的/dist/css/main.css中，因为/dist/中不会出现_bower_components文件夹。

您还需要手动将字体文件本身复制到/ app / fonts目录中，或者设置Grunt来执行此操作。

答案 1 :(得分：0)

绝对最简单在项目中获取Font Awesome的方法是使用此处详述的CDN选项：

Get Started with Font Awesome

您可以简单地将<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">放入_includes/head.html，<i class="fa fa-camera-retro"></i>之类的内容将无处不在。

如果您需要/更喜欢在本地提供服务，请继续阅读......

请注意，在dist/目录中，没有文件夹bower_components/。这意味着1）grunt没有将任何bower资产复制到最终版本（grunt build），2）html文件中<link>引用将被打破/_bower_components/fontawesome/css/font-awesome.min.css。

步骤1（可选）

在您的主sass文件中包含app/_bower_components/fontawesome/css/font-awesome.css的内容，如下所示：

// .scss (not .sass) syntax
@import "path/to/font-awesome.css";

现在，当您运行grunt build时，font-awesome.css的内容将添加到dist的最终样式表中。

这意味着您可以从html中删除此行：

<link rel="stylesheet" href="/_bower_components/fontawesome/css/font-awesome.min.css">

（不要担心失去缩小，因为grunt build仍然会发生这种情况。）

现在你已经在sass文件中方便地控制了所有样式，并在此过程中保存了一个http请求。 （拳头凸块）

第2步

你有CSS for font-awesome，但现在这些链接将在最终版本中被破坏：

src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');

这是因为grunt在您告知之前不知道/_bower_components/fontawesome/fonts/中的文件。

注意Gruntfile.js的这一点：

copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          src: [
            // Jekyll processes and moves HTML and text files.
            // Usemin moves CSS and javascript inside of Usemin blocks.
            // Copy moves asset files and directories.
            'img/**/*',
            'fonts/**/*',
            // Like Jekyll, exclude files & folders prefixed with an underscore.
            '!**/_*{,/**}',
            // Explicitly add any files your site needs for distribution here.
            // '_bower_components/jquery/jquery.js',
            //'favicon.ico',
            //'apple-touch*.png'
          ],
          dest: '<%= yeoman.dist %>'
        }]
      },

copy:任务专为您dist中所需的任何资产而设计，这些资产尚未由compass或usemin等其他任务处理。

现在我们有几个选择

选项1

取消评论上面'_bower_components/jquery/jquery.js'并将其更改为'_bower_components/fontawesome/fonts/**/*'。现在fontawesome/fonts的内容将包含在最终dist中。

接下来，更新/_bower_components/fontawesome/css/font-awesome.css以反映新文件路径：

@font-face {
  font-family: 'FontAwesome';
  src: url('../_bower_components/fontawesome/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../_bower_components/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../_bower_components/fontawesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../_bower_components/fontawesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../_bower_components/fontawesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

警告：通过bower更新font-awesome将覆盖这些更改，您每次必须修复 。烦人。

那我们该怎么办？

选项2（我最喜欢的）

在 /_bower_components/fontawesome/fonts/被grunt复制到<%= yeoman.app %>/fonts/之前，让我们将fonts/**/*中的字体转换为dist 。幸运的是，files:任务已经是array，因此我们可以在现有任务之上添加另一个object。

以下是Gruntfile.js的更新部分：

copy: {
          dist: {
            files: [{
              expand: true,
              dot: true,
              cwd: '<%= yeoman.app %>',
              src: [
                // Jekyll processes and moves HTML and text files.
                // Usemin moves CSS and javascript inside of Usemin blocks.
                // Copy moves asset files and directories.
                'img/**/*',
                'fonts/**/*',
                // Like Jekyll, exclude files & folders prefixed with an underscore.
                '!**/_*{,/**}',
                // Explicitly add any files your site needs for distribution here.
                // '_bower_components/jquery/jquery.js',
                //'favicon.ico',
                //'apple-touch*.png'
              ],
              dest: '<%= yeoman.dist %>'
            },{
              // Copy font awesome fonts
              expand: true,
              cwd: '<%= yeoman.app %>',
              src: [
                '_bower_components/font-awesome/fonts/**/*',
              ],
              dest: '<%= yeoman.dist %>/fonts/'
            }]
          },

另请注意，filerev:任务会重命名dist中的某些资产，以便在部署时轻松进行缓存清除。如果在这些步骤之后，构建的css中的字体路径与dist/fonts中的路径不匹配，请尝试在filerev:中的Gruntfile.js任务中注释掉相关行：

filerev: {
      options: {
        length: 4
      },
      dist: {
        files: [{
          src: [
            '<%= yeoman.dist %>/js/**/*.js',
            '<%= yeoman.dist %>/css/**/*.css',
            '<%= yeoman.dist %>/img/**/*.{gif,jpg,jpeg,png,svg,webp}',
            // '<%= yeoman.dist %>/fonts/**/*.{eot*,otf,svg,ttf,woff}'
          ]
        }]
      }
    },
相关问题
最新问题