gulp-load-plugins.sourcemaps.init() Ошибка типа: невозможно прочитать свойство 'init' из неопределенного

Question

Я пытаюсь адаптировать файл gulp к своим целям и сталкиваюсь с проблемами. Я забочусь только об одной задаче:

    gulp.task('js:browser', function () {
      return mergeStream.apply(null,
        Object.keys(jsBundles).map(function(key) {
          return bundle(jsBundles[key], key);
        })
      );
    });

Он использует browserify, чтобы сжать мой пакет в один пригодный для использования файл. Он использует эти два метода и этот объект:

function createBundle(src) {
  //if the source is not an array, make it one
  if (!src.push) {
    src = [src];
  }


  var customOpts = {
    entries: src,
    debug: true
  };
  var opts = assign({}, watchify.args, customOpts);
  var b = watchify(browserify(opts));

  b.transform(babelify.configure({
    stage: 1
  }));

  b.transform(hbsfy);
  b.on('log', plugins.util.log);
  return b;
}

function bundle(b, outputPath) {
  var splitPath = outputPath.split('/');
  var outputFile = splitPath[splitPath.length - 1];
  var outputDir = splitPath.slice(0, -1).join('/');

  console.log(outputFile);
  console.log(plugins);
  return b.bundle()
    // log errors if they happen
    .on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
    .pipe(source(outputFile))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(plugins.sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    .pipe(plugins.sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('build/public/' + outputDir));
}

var jsBundles = {
  'js/polyfills/promise.js': createBundle('./public/js/polyfills/promise.js'),
  'js/polyfills/url.js': createBundle('./public/js/polyfills/url.js'),
  'js/settings.js': createBundle('./public/js/settings/index.js'),
  'js/main.js': createBundle('./public/js/main/index.js'),
  'js/remote-executor.js': createBundle('./public/js/remote-executor/index.js'),
  'js/idb-test.js': createBundle('./public/js/idb-test/index.js'),
  'sw.js': createBundle(['./public/js/sw/index.js', './public/js/sw/preroll/index.js'])
};

Когда я запускаю gulp task js:bower, я получаю следующую ошибку от .pipe(plugins.sourcemaps.init({loadMaps: true})) выражение:

TypeError: Cannot read property 'init' of undefined

Я знаю, что строки являются необязательными, и я могу просто закомментировать их, но я хочу их. Когда я запускаю код в файле примера, он работает правильно, когда я запускаю его в моем файле gulp, он выдает мне ошибку. Любые предложения о том, что я мог бы пропустить? Спасибо!

Answer 1

gulp-load-plugins анализирует содержимое вашего package.json файл, чтобы узнать, какие плагины Gulp вы установили. Удостоверься что gulp-sourcemaps является одним из "devDependencies" определены там. Если не запустить

npm install --save-dev gulp-sourcemaps

Существует небольшая вероятность того, что ваша проблема связана с отложенной загрузкой плагина sourcemaps. Если вышеуказанное не помогает, попробуйте gulp-load-plugins как это:

var plugins = require('gulp-load-plugins')({lazy:false});