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文件。

当我向项目添加新字体时，我必须编辑我的Grunt文件，当我删除/更新字体时也是如此。

所以，问题很简单：如何才能最好地管理我的项目字体？什么是最佳做法？ “酷孩子”是如何做到的？

Answer 1

几个星期前我遇到过这个问题，我还使用了yeoman-angular-generator并且不得不调整副本：dist。

在我的项目中，我使用了3种不同的字体，font-awesome，lato和open-sans。我通过bower添加了font-awesome，但另外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...

希望这有帮助！

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

1 个答案: