javascript - ¿Cómo usar un stream como entrada para Browserify?

En Gulp, estoy intentando compilar TypeScript, concatenarlo y luego pasarlo por Browserify para manejar los requires (luego uglify si es en modo producción).

Este código de ejemplo es lo más cercano que he encontrado a lo que estoy tratando de hacer, sin embargo utiliza un archivo intermedio. Preferiría mantener las cosas en el flujo para evitar la sobrecarga del archivo intermedio, si es posible.

Dado que Browserify produce un flujo, parece que también debería saber cómo aceptar uno.

El código relevante:

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...
        ;

El resultado:

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

Cuando omito la concatenación, el resultado es el mismo, excepto que con foobar.js en lugar de main.js donde foobar.ts es uno de los archivos de entrada.

Un segundo intento

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...

Un nuevo error

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

Respuesta #1

No puedes pasar un flujo vinyl a browserify. Solo acepta flujos text o buffer. La única solución es transformar el flujo de entrada vinyl en un flujo text que browserify pueda comprender:

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

Respuesta #2

echa un vistazo a gulp-browserify, es un complemento de gulp para browserify.

Ejemplo :

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...
    ;

para opciones, puede consultar el enlace publicado arriba