Gulp fontgen fails because “TypeError: Cannot read property 'replace' of undefined”

Question

I'm starting with a gulp-fontgen project, but I got an error when I run it with gulp command:

TypeError: Cannot read property 'replace' of undefined

My gulpfile:

var gulp = require('gulp');
var fontgen = require('./node_modules/gulp-fontgen');

gulp.task('fontgen', function() {
  return gulp.src("./assets/*.{ttf,otf}")
    .pipe(fontgen({
      dest: "./dest/"
    }));
});

gulp.task('default', ['fontgen']);

My package.json:

{
  "name": "garagord-webfont",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-fontgen": "^0.2.4"
  }
}

Entire terminal output:

$ gulp
[11:26:24] Using gulpfile /Volumes/B/Documentos/tipografia-garagord/Gulp/gulpfile.js
[11:26:24] Starting 'fontgen'...
/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/fontfacegen/lib/configure.js:19
    _.config_file  = _.source.replace(_.extension, '') + '.json';
                             ^

TypeError: Cannot read property 'replace' of undefined
    at module.exports (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/fontfacegen/lib/configure.js:19:30)
    at module.exports (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/fontfacegen/lib/fontfacegen.js:16:18)
    at DestroyableTransform._transform (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/gulp-fontgen/lib/gulp-fontgen.js:47:31)
    at DestroyableTransform.Transform._read (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
    at writeOrBuffer (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
    at write (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Volumes/B/Documentos/tipografia-garagord/Gulp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)

Answer 1

The gulp-fontgen plugin is horribly broken. Just take a look at the source code :

return _through2.default.obj(function (file, enc, callback) {
  // options.source = file.path;
  (0, _fontfacegen2.default)(options);

  undefined.push(file);
  return callback();
});

The commented out line above is what is causing your error. The source option is not passed along to fontfacegen . Even if you uncomment that line there's a freaking undefined.push(file); in there which cannot possibly work (lesson: don't take drugs, kids, and always write your unit tests).

My suggestion: don't use gulp-fontgen . The plugin is really just a thin wrapper around fontfacegen . You can easily replace it by using fontfacegen directly in combination with map-stream :

var gulp = require('gulp');
var fontfacegen = require('fontfacegen');
var map = require('map-stream');

gulp.task('fontgen', function() {
  return gulp.src("./assets/*.{ttf,otf}")
    .pipe(map(function(file, cb) {
      fontfacegen({
        source: file.path,
        dest: './dest/'
      });
      cb(null, file);
    }));
});