Bootstrap 3.0 with Brunch 的字体文件答案

【问题标题】：Font files for Bootstrap 3.0 with BrunchBootstrap 3.0 with Brunch 的字体文件
【发布时间】：2013-09-26 01:28:32
【问题描述】：

我想包含 Bootstrap 3.0 的字形图标（又名 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"   
  ],

但据我所知，这没有任何效果。有可能我需要强制更新凉亭，因为自从我添加了对字体文件的引用以来，Bootstrap 没有版本更新。除此之外，我不知道如何让早午餐将这些文件放入./public/fonts 目录。

【问题讨论】：

标签： brunch

【解决方案1】：

手动将它们复制到app/assets 左右。 Brunch 目前不从 bower 获取文件，我们正在寻找这样做的好方法。

【讨论】：

好的，可以很好地添加到 Bower 中，但我现在可以手动使用它。感谢并期待看到您提出的解决方案。顺便说一句，是否有推特句柄、RSS 提要或其他任何我可以收听以获取早午餐更新的内容？
同样的问题，很高兴拥有！也许是“javascripts/stylesheets/templates”旁边的另一种“类型”？

【解决方案2】：

这是在 brunch 1.8.3 中测试并使用的。

我发现使用引导程序和其他带有字体资源的库解决此问题的最佳方法如下：

1) 首先，使用 bootstrap（或其他库）的覆盖更新 bower.json 文件。您可以在下面看到 main 已针对 bootstrap 进行了更新，现在 brunch 可以访问字体、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');

【讨论】：

加一求解。如果我可以给加二，那将是使用多个正则表达式。或者他们所说的正则表达式。
忘了最后一件事，检查上面更新的第三步。