Файлы шрифтов для Bootstrap 3.0 с Brunch

Я хотел бы включить файлы шрифтов для Bootphrap 3.0 glyphicons (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 обновиться, поскольку обновление Boottrap не было обновлено, так как я добавил ссылки на файлы шрифтов. Помимо этого я не понимаю, как заставить Brunch поместить эти файлы в каталог ./public/fonts.

Ответ 1

Скопируйте их вручную на app/assets или около того. Brunch не извлекает файлы из беседки в настоящее время, мы ищем хороший способ сделать это.

Ответ 2

Это было протестировано и работало с завтраком 1.8.3.

Лучший способ решить эту проблему с помощью начальной загрузки и других библиотек с помощью свойств шрифта:

1) Во-первых, обновите файл bower.json с помощью переопределения для начальной загрузки (или другой библиотеки). Ниже вы можете видеть, что основное обновление было обновлено для начальной загрузки, и теперь у 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 регулярных выражения, соответствующие критерию по умолчанию для активов, и новый, который я добавил для файлов шрифтов. Вы можете добавить дополнительные выражения regex для своих нужд.

exports.config = {
  conventions: {
    assets: function(path) {
      /**
       * Loops every path and returns path|true|false according what we need
       * @param   path    file or directory 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 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');