javascript - 你如何在 Gulp 任务中使用 browserify？

Question

我是 Gulp 的新手，但是通过关注 this教程 我设置了一个 Gulp 任务，旨在浏览特定目录中的 javascript 文件并将它们通过管道传输到不同的目录 - 非常简单。我看过其他一些教程，但这种方法似乎是最简洁的。这是我的代码:

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 模块. 有没有办法确定堆栈跟踪中文件的完整路径？)

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/'));
});