Come utilizzare uno stream come input per Browserify?

Question

In Gulp, sto cercando di compilare TypeScript, concatenarlo, quindi eseguirlo tramite Browserify per gestire lo require s (quindi ugolare dopo se in modalità produzione).

This sample code è il più vicino che ho trovato a quello che sto cercando di fare, tuttavia utilizza un file intermedio. Preferisco piuttosto mantenere le cose nello stream per evitare il sovraccarico del file dell'intermediario, se possibile.

Poiché Browserify genera uno stream, sembra che debba sapere anche come accettarne uno.

Il codice rilevante:

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

Il risultato:

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

Quando Tralascio concatenazione, il risultato è lo stesso, se non con foobar.js anziché main.js dove foobar.ts è uno dei file di input.

Un secondo tentativo

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 nuovo errore

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

Answer 1

Non è possibile passare un flusso vinyl a browserify. Accetta solo stream text o buffer. L'unica soluzione è quella di trasformare il flusso di input vinyl in un flusso text che browserify può afferrare:

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

un'occhiata a gulp-browserify, è un plugin per il sorso browserify.

Esempio:

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

per le opzioni si può fare riferimento al link postato sopra