Font files for Bootstrap 3.0 with Brunch

Question

I'd like to include the font files for Bootstrap 3.0's glyphicons (aka, glyphicons-halflings-regular.woff, .ttf, .svg). Bower successfully pulls them down and I have added them to the "overrides" section of the bower.json file in my app:

"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"   
  ],

But as far as I can tell this has no effect. It is possible that maybe I need to force bower to update as there's been no version update to Bootstrap since I added the references to the font files. Other than that I'm at a loss at how to get Brunch to put these files into the ./public/fonts directory.

Answer 1

Copy them manually to app/assets or so. Brunch does not fetch files from bower currently, we are looking for a good way of doing so.

Answer 2

This was tested and working with brunch 1.8.3.

The best way I've found to solve this issue with bootstrap and other libraries with font assets is the following:

1) Firstly, update your bower.json file with an override for bootstrap( or other library). You can see below that the main has been updated for bootstrap, and now brunch has access to the fonts, js, and css files.

{
  "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) Update the conventions for assets within brunch-config.js. You can use a function to create customized conventions. The function below has 2 regexs corresponding to the default test for assets and the new one I added for font files. You can add more regex statements for your needs.

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); 
    }
  }
};

3. Use the after-brunch plugin to setup correct file structure for fonts.

   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(' && ')
     ]
    }
   };
   

Notice in the above code that css and fonts are placed in specific directories, this is needed for it to work correctly as the css references the fonts at a specific location:

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