11

我想包含 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目录中。

4

2 回答 2

8

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

于 2013-09-21T10:15:57.313 回答
1

这已经过测试并与早午餐 1.8.3 一起使用。

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

1）首先，使用引导程序（或其他库）的覆盖更新您的 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); 
    }
  }
};

  1. 使用 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');
于 2015-06-26T20:06:34.283 回答