Gruntjs 字体目录问题

我有问题，试图让我所有的字体工作后，我咕噜建设。当我“咕噜服务”我的应用程序字体工作良好

问题是我的一些bower组件css文件使用的字体目录与grunt的预期不同

Grunt希望在

app/styles/font/

中使用字体，前提是要在生成过程中复制这些字体

我在

app/font

中放置了一个自定义字体（我可以在我的主css中更改此字体，所以这不是一个大问题）

materialize.css需要

。/font/roboto/

和

。/font/material设计图标中的字体

@font-face {
font-family: "Roboto";
src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), 

@font-face {
font-family: "Material-Design-Icons";
src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"),

materialdesignics.css需要

。/font/

@font-face {
font-family: 'MaterialDesignIcons';
src: url("../fonts/materialdesignicons-webfont.eot?v=1.0.62");

---

我不想更改bower组件中的css，而是我的Grunfile.js中是否有更改，可以将所有字体源合并到一个字体文件中，并在构建过程中修改css以反映更改？如果不是，处理这个问题的最佳方法是什么？我的gruntfile.js未经修改。谢谢

我绝对不是专家。我在碰到同样的问题后发现了你的问题。为了完整起见，我将在这里包括所有步骤

我用bower安装了

roboto fontface

软件包：

bower install roboto-local --save

然后我跑了

grunt build

这确保roboto fontface css文件被注入到my index.html文件中：

它还更新了

dist

目录，这样我就可以看到roboto字体的使用情况

不幸的是，字体没有复制到我的

dist

目录。注意，我确实有一个字体目录，但这是用于引导字体的。我的dist目录如下所示：

   |-fonts
   |-images
   |-scripts
   |-styles

roboto fontface

CSS文件正在

dist/style/font/

中查找字体：

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.eot');
    src: url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin.woff2') format('woff2'),
         url('fonts/Roboto-Thin.woff') format('woff'),
         url('fonts/Roboto-Thin.ttf') format('truetype'),
         url('fonts/Roboto-Thin.svg#Roboto') format('svg');
    font-weight: 100;
    font-style: normal;
}

我决定最好的办法就是把字体放在那里，而不是修改任何css文件。我在

grunfile.js

中修改了

copy dist

规则，添加了：

{
expand: true,
cwd: 'bower_components/roboto-fontface/',
src: 'fonts/*',
dest: '<%= yeoman.dist %>/styles/'
}

我不确定要在何处修改复制区规则，因此为了完整起见，这里是我的新规则的全部内容：

// 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',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    },
    **{
      expand: true,
      cwd: 'bower_components/roboto-fontface/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>/styles/'
    }**]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

//将剩余文件复制到其他任务可以使用的位置
副本：{
地区：{
档案：[{
是的，
多特：没错，
cwd:“”，
目标：''，
src:[
“*.{ico，png，txt}”，
“.htaccess”，
“*.html”，
'images/{，*/}*{webp}'，
'样式/字体/{，*/}**'
]
}, {
是的，
cwd:“.tmp/images”，
目标：'/images'，
src:['generated/*']
}, {
是的，
cwd:“bower_组件/引导/分布”，
src:'font/*'，
目标：“”
},
**{
是的，
cwd:“bower_组件/roboto fontface/”，
src:'font/*'，
目标：'/styles/'
}**]
},
风格：{
是的，
cwd:“/styles”，
目标：'.tmp/styles/'，
src:“{，*/}*.css”
}
},

  |-fonts
  |-images
  |-scripts
  |-styles
  |---fonts

// 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',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    },
    **{
      expand: true,
      cwd: 'bower_components/roboto-fontface/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>/styles/'
    }**]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},