如何使用流作为Browserify的输入？

Question

在Gulp中,我正在尝试编译TypeScript,将其连接起来,然后通过Browserify运行它来处理requires(然后在生产模式下进行uglify ).

这个示例代码是我发现的最接近我正在尝试做的事情,但是它使用了一个中间文件.我宁愿把事情保留在流中,以避免中间文件的开销,如果可能的话.

由于Browserify输出一个流,它似乎应该知道如何接受一个流.

相关代码:

var gulp = require('gulp');
var browserify = requ
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var transform = require('vinyl-transform');
var typeScript = require('gulp-typescript');

gulp.task('scripts', function () {
    return gulp.src([mySrcDir,'typings/**/*.d.ts'])
        .pipe(sourcemaps.init())
        .pipe(typeScript(typeScriptProject))
        .pipe(concat('main.js'))
        .pipe(transform(function (filename) {
            return browserify(filename).bundle();
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(ns.outDir))
        // Reload, notify...
        ;

结果:

Error: Cannot find module 'C:\path\to\project\root\src\main.js' in 'C:\path\to\project\root'

当我省略连接时,结果是相同的,除了输入文件之一foobar.js而不是main.jswhere foobar.ts.

第二次尝试

gulp.task('scripts', function () {
    var stream = gulp.src([mySrcDir,'typings/**/*.d.ts'])
        .pipe(sourcemaps.init())
        .pipe(typeScript(typeScriptProject))
        .pipe(concat('main.js'));
    var bundleStream = ns.browserify(stream).bundle().on('error', errorHandler);
    // and then...

一个新的错误

C:\path\to\project\root\_stream_0.js:1
[object Object]
        ^
ParseError: Unexpected token

Answer 1

您无法将vinyl流传递给 browserify。它只接受text或buffer流式传输。唯一的解决方案是将输入vinyl流转换为textbrowserify 可以抓取的流：

var gutil = require('gulp-util')
var through = require('through2')
var intoStream = require('into-stream')

// ...
.pipe(through.obj(function(file, encoding, next) {
  bundle = browserify(intoStream(file.contents))
  this.push(new gutil.File({
    path: 'index.js',
    contents: bundle.bundle()
  }))
  next()
}))