Please add woff2 to fonts glob

[alexciarlillo]

I am using font-awesome which now supports woff2. Modernizr detects a woff2-able browser and looks for the file but it is not being copied to the dist/ directory with the rest of the fonts. It looks like woff2 just needs to be added to types.json. I am sure there is a way to manually do this with the manifest file but I could not figure it out for the life of me. Could you show an example that might work? It may help me understand the asset-builder a bit better. Thanks

[austinpray]

Gotta do some work stuff real quick but this is a great opportunity for an example. Will fix and document in a moment.

[austinpray]

Alright so this should be fixed.

Here is the commit: 27dfc83. I have added some tests to verify that this is working in the future.

I have also added some documentation about the default properties asset-builder sets for you: 3881227

There are three ways this could have been fixed.

1. Patch asset-builder

Background

Let me explain a bit how asset-builder works so the fix makes sense. Here is an example gulp task:

gulp.src(manifest.globs.fonts, function () {
  // do the font stuff
});

The above is basically equivalent to this:

gulp.src([
  'bower_components/example-font/example.woff', 
  'bower_components/example-font/example.woff2', 
  'assets/fonts/**/*'
], function () {
  // do the font stuff
});

Let's examine how manifest.globs.fonts gets built.

Building manifest.globs.fonts

Added some documentation

See 27dfc83

2. Modify the gulpfile

Let's say there is a bug in asset builder such that no woff2 fonts are available in manifest.globs.fonts.

console.log(manifest.globs.fonts);
// => ['bower_components/example-font/example.woff', 'assets/fonts/**/*']

There are a lot of ways to skin this cat. gulpfiles are just javascript. So you can do any array operation you want.

gulp.src(manifest.globs.fonts.concat([
  'bower_components/example-font/example.woff2'
]), function () {
  // do the font stuff
});

or

manifest.globs.fonts.push('bower_components/example-font/example.woff2');
gulp.src(manifest.globs.fonts, function () {
  // do the font stuff
});

or you can just not even use asset-builder for that task

gulp.src([
  'bower_components/example-font/example.woff', 
  'bower_components/example-font/example.woff2', 
  'assets/fonts/**/*'
], function () {
  // do the font stuff
});

gulpfiles are just javascript and asset-builder is just a node module that spits out arrays of globs.

3. Modify the manifest.json

You could also have added the bower_components/example-font/example.woff2 to the files property of the "fonts" dependency.

{
  "dependencies": {
    "fonts": {
       "external": true,
       "files": [
         "assets/fonts/**/*",
         "bower_components/example-font/example.woff2"
       ]
    }
  }
}

[austinpray]

Run npm update to get the latest version of asset-builder for your project.

[alexciarlillo]

Thanks very much. I did get it working originally by modifying the gulpfile, but I knew the manifest file should be capable as well, and is where I would rather make modifications. I was close, but I was missing the "external" setting and putting "bower_components" in the path. Anyway, I really appreciate the explanation. The asset-builder makes a lot more sense to me now. I updated from npm and everything is good now.