如何使用bower/grunt正确管理字体

Question

在我的项目中,我向我的bower.json添加了一些使用字体的项目:

• fontawesome
• 引导
• 的Roboto-fontface

Grunt文件主要由"yo angular"生成,带有一些自定义编辑.字体在"grunt serve"开发模式下运行得很好,但是当我使用"grunt"进行dist构建时,它们不起作用.

问题是字体不会复制到我的dist文件夹.为了解决这个问题,我手动更改了我的Gruntfile以复制:dist所有我的字体.像这样:

{
    expand: true,
    cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",
    dest: "<%= yeoman.dist %>/fonts",
    src: ["*.*"]
}

我现在的问题是我的所有库CSS都希望字体在特定的文件夹上(例如roboto-fontface和bootstrap期望字体在不同的文件夹中).

因此,我将不得不更改我的gruntfile以替换*.css文件上的字体引用以定位正确的路径.我不知道怎么做但我的主要痒是这看起来非常"hacky"

Bower与我的css文件非常配合:它们会自动添加到index.html,并且在进行dist构建时会正确替换它们的href.例如,我可以毫无问题地升级我的ng-grid项目,删除并添加新项目.我认为这是有效的,因为包含的ng-grid项目上的bower.json文件

  "main": ["./ng-grid.css", "./build/ng-grid.js"]

Grunt已正确配置以理解并将其添加到我的index.html.

但对于字体,似乎唯一的解决方案是修改我的gruntfile以添加copy:dist然后在我的*css文件上进行某种正则表达式替换.但是,例如,roboto-fontface项目bower.json文件似乎也有一个很好的"主",除了css文件之外列出了所有字体.

对我来说,似乎合乎逻辑的是我应该能够配置我的Gruntfile,以便它理解"main"参数有字体并自动将它们复制到我的dist /并用正确的路径替换我的css文件.

当我向项目添加新字体时,我将不得不编辑我的Gruntfile,当我删除/更新字体时也是如此.

所以,问题很简单:我如何才能最好地管理我的项目字体？什么是最佳做法？"酷孩子"怎么做呢？

Answer 1

几周前我遇到了这个问题，我也使用yeoman-angular-generator并不得不调整 copy:dist 。

在我的项目中，我使用了 3 种独立的字体：font-awesome、lato和open-sans。我font-awesome通过 Bower 添加，但另外 2 个是我手动下载的，并将它们放在下面app/fonts

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
        //any new font you drop under app/fonts will be copied to dist
        'fonts/**'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome',
      src: ['fonts/*.*'],
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},
//rest of Gruntfile...

希望这可以帮助！