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任务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

您的问题与延迟加载源映射插件有关的可能性很小。如果上述内容无法帮助您尝试gulp-load-plugins，请执行以下操作：

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

gulp-load-plugins.sourcemaps.init（）TypeError：无法读取未定义

1 个答案: