如何在Gulp任务中使用Browserify？

Question

我对Gulp还比较陌生，但是通过遵循这篇教程，我设置了一个Gulp任务，目的是把特定目录下的JavaScript文件进行Browserify处理，并将它们传输到另一个目录 - 非常简单。我看了几个其他的教程，但这种方法似乎最为简明扼要。以下是我的代码：

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');

gulp.task('js', function() {
  var browserified = transform(function(filename) {
    return browserify(filename).bundle();
  });

  return gulp.src(['./public/js/src/**/*.js'])
    .pipe(browserified)
    .pipe(gulp.dest('./public/js/dist'));
});

上面的代码与我看到的许多其他实现非常相似，但是当我尝试使用“gulp js”运行它时，会产生以下错误：

[15:47:13] Using gulp file
~/development/launchpad/workshop/gulpfile.js
[15:47:13] Starting 'js'...
_stream_readable.js:540
     var ret = dest.write(chunk);

               ^
TypeError: undefined is not a function
    at Producer.ondata (_stream_readable.js:540:20)
    at Producer.emit (events.js:107:17)
    at Producer.Readable.read (_stream_readable.js:373:10)
    at flow (_stream_readable.js:750:26)
    at resume_ (_stream_readable.js:730:3)
    at _stream_readable.js:717:7
    at process._tickCallback (node.js:355:11)

有人知道可能是什么原因导致这个错误吗？
（顺便说一下，我想查看堆栈跟踪中的文件，以尝试弄清楚这里发生了什么，但在Spotlight中搜索_stream_readable.js会产生大约20个该名称的文件，所有这些文件似乎都是Node模块。是否有一种方法可以确定堆栈跟踪中文件的完整路径？）

- Jordan Schalm

---

我有完全相同的问题。 - ceremcem

Answer 1

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify('lib/front/app.js')
    .bundle()
    //Pass desired output filename to vinyl-source-stream
    .pipe(source('bundle.js'))
    // Start piping stream to tasks!
    .pipe(gulp.dest('public/build/'));
});

- Amir Hoseinian

---

这对我来说在Gulp 4.0.0上很好用。非常不错。 - Kevin Powell

Answer 2

如果你想让browserify与gulp一起工作，并且创建一个文件，我们可以通过 .pipe (gulp.dest ('src/js')) 来指定它， 那么你需要下载 vinyl-source-stream 并将其扔进 .pipe(source('bundle.js'))， 但实际上在 browserify 中，即使是 bundle 方法也接受回调函数，不需要 dest 或者 source。

 browserify({
  entries: jsFile,
  basedir: "src/js/dev",
  debug: true,
})
.transform(babelify, {
  presets: ['@babel/preset-env'],
})
.bundle((err, buffer) => {
  let event = new EventEmitter();
  if (err) {
    event.emit('error',err)
  }
  else {
    let data = minify(buffer.toString(), {}).code;
    fs.createWriteStream('./src/js/bundle.js').write(data)
    console.dir(222);
    bs.reload()
  } 
})

- SinGlE BW

Answer 3

不幸的是，这是一个与browserify/gulp有关的问题，vinyl-transform无法解决。解决方案是使用vinyl-source-stream和vinyl-buffer：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('node-glob');

gulp.task('browserify', function (cb) {

  glob('./src/**/*.js', {}, function (err, files) {

    var b = browserify();
    files.forEach(function (file) {
        b.add(file);
    });

    b.bundle().
      .pipe(source('output.js'))
      .pipe(gulp.dest('./dist'));

    cb();
  })  
});

更多信息在这里。

- Michael

---

提供的链接中指出，“vinyl-transform”方法更好，因为它需要较少的依赖项，所以要么链接中的信息已经改变，要么我漏掉了什么。 - Giedrius

如果您尝试该代码示例，您会发现 vinyl-transform 解决方案无法正常工作，这是 Jordan 最初遇到的问题。要解决这个问题，必须使用 source-stream（除非有什么变化并且它现在可以工作）。 - Michael