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

Question

在Gulp中，我正在尝试编译TypeScript，连接它，然后通过Browserify运行它来处理require s（如果在生产模式下则为uglify）。

This sample code是我发现的最接近我正在尝试做的事情，但是它使用了中间文件。我宁愿把事情保留在流中，以避免中间文件的开销，如果可能的话。

由于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.js，其中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流转换为浏览器可以掌握的text流：

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()
}))

Answer 2

看一下gulp-browserify，这是一个浏览器的gulp插件。

示例：

gulp.src([mySrcDir,'typings/**/*.d.ts'])
    .pipe(sourcemaps.init())
    .pipe(typeScript(typeScriptProject))
    .pipe(concat('main.js'))
    .pipe(browserify(options)
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(ns.outDir))
    // Reload, notify...
    ;

您可以参考上面发布的链接