11

Bootstrap 3.0 のグリフィコン (別名、glyphicons-halflings-regular.woff、.ttf、.svg) のフォント ファイルを含めたいと思います。Bower はそれらを正常にプルダウンし、アプリの bower.json ファイルの "overrides" セクションに追加しました。

"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 のバージョンが更新されていないため、bower を強制的に更新する必要がある可能性があります。それ以外は、ブランチにこれらのファイルを./public/fontsディレクトリに配置する方法に途方に暮れています。

4

2 に答える 2

8

などに手動でコピーしますapp/assets。現在、Brunch は bower からファイルをフェッチしません。そのための良い方法を探しています。

于 2013-09-21T10:15:57.313 に答える
1

これはテスト済みで、ブランチ 1.8.3 で動作します。

フォント アセットを含むブートストラップやその他のライブラリでこの問題を解決するために私が見つけた最善の方法は次のとおりです。

1) まず、bootstrap(または他のライブラリ) のオーバーライドで bower.json ファイルを更新します。メインがブートストラップ用に更新され、ブランチがフォント、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-branch プラグインを使用して、フォントの正しいファイル構造をセットアップします。

    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 に答える