Gruntjs 在jekyll项目中与grunt和bower一起使用FontAwesome_Gruntjs_Jekyll_Bower

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

gruntjs jekyll

Gruntjs 在jekyll项目中与grunt和bower一起使用FontAwesome,gruntjs,jekyll,bower,Gruntjs,Jekyll,Bower,我正试图在我的杰基尔项目中使用。我使用yeoman（generator jekyllrb）生成了它，我使用的是Grunt和Bower。我使用bower:bower安装fontawesome安装了字体，它已安装在我的app/\u bower\u组件目录中。我的问题是如何访问它？以下是app/\u bower\u components/fontawesome目录中的内容： fontawesome ├── css │ ├── font-awesome.css │ └── font-awesom

我正试图在我的杰基尔项目中使用。我使用yeoman（

generator jekyllrb

）生成了它，我使用的是Grunt和Bower。我使用bower:

bower安装fontawesome

安装了字体，它已安装在我的

app/\u bower\u组件

目录中。我的问题是如何访问它？以下是

app/\u bower\u 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/\u bower\u 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;
}

<!-- 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 -->

在我的html文件中，我有以下内容：

@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;
}

<!-- 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 -->

如果我将字体文件复制到我的

应用程序/font

（我认为这不是最好的方法），它也不会起作用，因为grunt会更改它们的名称。那么，我该怎么办

这是我的，如果你需要的话

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

dist：{
档案：[{
是的，
多特：没错，
cwd:“”，
src:[
//Jekyll处理和移动HTML和文本文件。
//Usemin在Usemin块中移动CSS和javascript。
//复制移动资产文件和目录。
“img/***”，
“字体/***”，
//与Jekyll一样，排除带有下划线前缀的文件和文件夹。
'!**/_*{,/**}',
//在此处显式添加站点分发所需的任何文件。
//“\u bower\u components/jquery/jquery.js”，
//“favicon.ico”，
//“apple touch*.png”
],
目标：“”
}]
},

它工作得非常好，它生成了一个工作的静态站点，但当我部署它时（我使用的是GitHub页面）它只是在

\u bower\u components

目录中找不到任何内容。

您需要从

/app/css/main.css

创建一个到css的导入，以便它将包含在编译的

/dist/css/main.css

中，因为

/dist//code>中不存在“bower\u components”文件夹
您还需要手动将字体文件本身复制到/app/fonts目录中，或者设置Grunt来执行此操作
 在项目中获得字体效果最简单的方法是使用CDN选项，详情如下：

您只需将
放入\u includes/head.html
，像
这样的东西就会神奇地在任何地方都能工作
如果您需要/更愿意在本地提供所有服务，请继续阅读……
请注意，在dist/
目录中，没有文件夹bower\u components/
。这意味着1）grunt没有将任何bower资产复制到最终版本（grunt build
），2）html文件中对/\u bower\u components/fontawesome/css/font awesome.min.css的
引用将被破坏
步骤1（可选）
将app/_bower\u components/fontawesome/css/font awesome.css
的内容包含在您的主sass文件中，如下所示：
// .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
不知道/\u bower\u components/fontawesome/fonts/
中的文件，除非您告诉它
请注意grunfile.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: {
            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: {
      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}'
          ]
        }]
      }
    },

警告：通过bower更新font awesome将覆盖这些更改，您每次都必须修复它。讨厌
那么我们能做什么呢
选项2（我的最爱）
让我们先将字体从/\u bower\u components/fontawesome/fonts/
复制到/fonts/
中，然后再由grunt将字体/***
复制到dist
。幸运的是，文件：
任务已经是一个任务，因此我们可以在现有任务的基础上再添加一个任务
以下是grunfile.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: {
            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: {
      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}'
          ]
        }]
      }
    },