Question

我想要包含Bootstrap 3.0的字形文件的字体文件（aka，glyphicons-halflings-regular.woff，.ttf，.svg）。 Bower成功地将它们拉下来，我已将它们添加到我的应用程序中bower.json文件的“覆盖”部分：

"bootstrap": {
  "main": [
    "dist/js/bootstrap.js",
    "dist/css/bootstrap.css",
    "dist/fonts/glyphicons-halflings-regular.woff",
    "dist/fonts/glyphicons-halflings-regular.ttf",
    "dist/fonts/glyphicons-halflings-regular.svg"   
  ],

但据我所知，这没有效果。我可能需要强制更新bower，因为我没有对Bootstrap进行版本更新，因为我添加了对字体文件的引用。除此之外，我对如何让Brunch将这些文件放入./public/fonts目录感到茫然。

Answer 1

将它们手动复制到app/assets左右。 Brunch目前没有从bower获取文件，我们正在寻找一种好方法。

Answer 2

这是经过测试并使用早午餐1.8.3。

我发现用bootstrap和其他带有字体资源的库来解决这个问题的最好方法如下：

1）首先，使用覆盖引导程序（或其他库）更新您的bower.json文件。你可以在下面看到main已经为bootstrap更新，现在brunch可以访问fonts，js和css文件。

{
  "name": "Example",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "3.3.x",
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff",
        "dist/fonts/glyphicons-halflings-regular.woff2"
      ],
      "dependencies": {
        "jquery": ">= 1.9.1"
      }
    }
  }
}

2）更新brunch-config.js中资产的约定。您可以使用函数来创建自定义约定。下面的函数有2个正则表达式，对应于资产的默认测试和我为字体文件添加的新正则表达式。您可以根据需要添加更多正则表达式语句。

exports.config = {
  conventions: {
    assets: function(path) {
      /**
       * Loops every path and returns path|true|false according what we need
       * @param   path    file or directory's path
       * @returns path    if it is a directory
       *          true    if it fit with the regular expression
       *          false   otherwise
       *
       */
      if( /\/$/.test(path) ) return path;
      // /^app\/.*\.html/.test(path) ||
      // RegExp for anything we need
      return /assets[\\/]/.test(path) 
            || /.*(?:\.eot|\.svg|\.ttf|\.woff2|\.woff)/.test(path); 
    }
  }
};

使用after-brunch插件为字体设置正确的文件结构。

exports.config = {
  stylesheets: {
    joinTo: {
      'styles/app.css': /^styles/,
      'styles/vendor.css': /^(vendor|bower_components)/,
    }
  },
  conventions: {
    assets: function(path) {
      /**
       * Loops every path and returns path|true|false according what we need
       * @param   path    file or directory's path
       * @returns path    if it is a directory
       *          true    if it fit with the regular expression
       *          false   otherwise
       *
       */
      if( /\/$/.test(path) ) return path;
      // /^app\/.*\.html/.test(path) ||
      // RegExp for anything we need
      return /assets[\\/]/.test(path) 
            || /.*(?:\.eot|\.svg|\.ttf|\.woff|\.woff2)/.test(path); 
    }
  },
  plugins: {
    afterBrunch: [
     [
       'mkdir public/fonts -p',
       'mv public/bootstrap/dist/fonts/* public/fonts',
       'rm -r public/bootstrap',
     ].join(' && ')
  ]
 }
};

请注意，在上面的代码中，css和字体放在特定的目录中，因为css引用了特定位置的字体所以需要它才能正常工作：

  src: url('../fonts/glyphicons-halflings-regular.eot');

Bootstrap 3.0 with Brunch的字体文件

2 个答案: