Usage with TypeScript

[MickL]

How to use with TypeScript? Following code was working with gulp-browserify but with gulp-bro i get the error:

Error: Cannot find module 'Users/[...]/src/main.js' from '/Users/[...]/src/scripts'

Gulp task:

 return gulp
        .src('./src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts.createProject('tsconfig.json')())
        .pipe(bro())
        .pipe(sourcemaps.write())

[ngryman]

Hey @MickL, could you provide me the call stack of your error and your devDependencies? What version of gulp-browserify were you using?

[MickL]

It seems like gulp-bro only accepts JavaScript files as src, but it would be very inconvenient to compile TS to JS, save the unbundled JS files, and start gulp-bro in a separate task.

gulp-browserify: 0.5.1

Hope you are looking for this:

Error: Cannot find module '/Users/[...]/src/scripts/main.js' from '/Users/[...]/src/scripts'
DestroyableTransform {
  _readableState:
   ReadableState {
     objectMode: false,
     highWaterMark: 16384,
     buffer: BufferList { length: 0 },
     length: 0,
     pipes: null,
     pipesCount: 0,
     flowing: null,
     ended: false,
     endEmitted: false,
     reading: false,
     sync: false,
     needReadable: true,
     emittedReadable: false,
     readableListening: false,
     resumeScheduled: false,
     destroyed: false,
     defaultEncoding: 'utf8',
     awaitDrain: 0,
     readingMore: false,
     decoder: null,
     encoding: null },
  readable: true,
  _events:
   { end:
      { [Function: bound onceWrapper] listener: [Function: onend] },
     prefinish: [Function: prefinish] },
  _eventsCount: 2,
  _maxListeners: undefined,
  _writableState:
   WritableState {
     objectMode: false,
     highWaterMark: 16384,
     finalCalled: false,
     needDrain: false,
     ending: false,
     ended: false,
     finished: false,
     destroyed: false,
     decodeStrings: true,
     defaultEncoding: 'utf8',
     length: 0,
     writing: false,
     corked: 0,
     sync: true,
     bufferProcessing: false,
     onwrite: [Function],
     writecb: null,
     writelen: 0,
     bufferedRequest: null,
     lastBufferedRequest: null,
     pendingcb: 0,
     prefinished: false,
     errorEmitted: false,
     bufferedRequestCount: 0,
     corkedRequestsFree:
      CorkedRequest { next: null, entry: null, finish: [Function] } },
  writable: true,
  allowHalfOpen: true,
  _transformState:
   { afterTransform: [Function: bound afterTransform],
     needTransform: false,
     transforming: false,
     writecb: null,
     writechunk: null,
     writeencoding: null },
  _destroyed: false,
  _transform: [Function: noop] }

[ngryman]

Thanks for the info. Could you dump your old gulp recipe when you were using browserify?

[MickL]

Its the same but call gulp-browserify instead of gulp-bro

[ngryman]

@MickL I'm not very familiar with TypeScript, but after taking a closer look, it seems from your example that you actually don't need bro (or browserify).

From the official TypeScript recipes you can:

• use tsify with browersify: recipe
• use gulp-typescript alone: recipe

So if you really want to use browserify, you would need to remove your gulp-typescript, install tsify and do something like:

return gulp
        .src('./src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(bro({ plugin: ['tsify'] }))
        .pipe(sourcemaps.write())

I'm closing it as it's probably not a gulp-bro bug, but a configuration problem. Feel free to re-open if you think otherwise.

[MickL]

Actually i want to use gulp-bro in bei gulp-process as i use gulp-browserify. The problem with gulp-browserify is it is deprecated, has no treeshaking etc as you described in your readme.

The problem seems to be simple, gulp-bro is looking for exisiting js files on my harddrive but actually they are in memory inside of the gulp-process.