Gulp fontgen失敗，因為“ TypeError：無法讀取未定義的屬性'replace'”

Question

我從一個gulp-fontgen項目開始，但是用gulp命令運行它時出現錯誤：

TypeError: Cannot read property 'replace' of undefined

我的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']);

我的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"
  }
}

整個終端輸出：

$ 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

gulp-fontgen插件嚴重損壞。 只需看一下源代碼即可 ：

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

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

上面的注釋行是導致您出錯的原因。 source選項沒有傳遞給fontfacegen 。 即使您取消注釋該行，也會出現undefined.push(file); 在那可能行不通的地方（課程：不要吸毒，不要孩子，要經常寫單元測試）。

我的建議：不要使用gulp-fontgen 。 該插件實際上只是fontfacegen的薄包裝。 您可以通過直接將fontfacegen與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);
    }));
});