How to use stream as input for browserify?

Question

In Gulp, I am trying to compile TypeScript, combine it, and then run through Browserify to handle require (then uglify after, if in run mode).

This code example is the closest I found to what I am trying to do, however it uses a mediation file. I would rather keep things in a stream to avoid the overhead of the intermediate file, if at all possible.

Since Browserify is outputting the stream, it seems like it should know how to receive it.

Relevant Code:

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

Result:

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

When I omit the concatenation, the result is the same, with the exception of foobar.js instead of main.js , where foobar.ts is one of the input files.

Second attempt

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

New mistake

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

Answer 1

You cannot stream vinyl to your browser. It accepts only text or buffer streams. The only solution is to convert the vinyl input stream to a text stream that the browser can recognize:

 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

look gulp-browserify , this is the gulp plugin for the browser.

Example:

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

for parameters you can link to the link published above