title: How to use Browserify + Watchify + Tsify + Gulp on multiple entry files and get multiple output files quickly
body: <p>I have been trying to use Gulp + Browserify + Tsify to transpile 4 files plus their libraries into 4 js files which is currently taking 4 or 5 seconds.</p>
  
  <p>In my current build script, watchify triggers an update on a change of any ts file for all 4 of my build pipes each of which traspiles every ts file in my project even if it is not being used in that pipe.</p>
  
  <p>Currently I am looking for a better and faster way of getting this done.</p>
  
  <pre><code>import * as browserify from "browserify"
  import * as gulp from "gulp"
  import * as rename from "gulp-rename"
  import * as sass from "gulp-sass"
  import * as uglify from "gulp-uglify"
  import * as gutil from "gulp-util"
  import * as fs from "fs"
  import * as tsify from "tsify"
  import * as buffer from "vinyl-buffer"
  import * as source from "vinyl-source-stream"
  import * as watchify from "watchify"
  import {assign} from "lodash"
  
  const sassOptions: sass.Options = {
      outputStyle: 'expanded'
  }
  
  function combinejs(update: boolean, minify: boolean) {
      ['backScript.ts', 'mainFrame.ts', 'commentFrame.ts','script-inject.ts'].forEach(f =&gt; {
          let b = browserify(assign({},watchify.args,{basedir:'src/', entries: f})),
              bundle = () =&gt; {
                  let pipe = b.bundle().on('error',gutil.log)
                      .pipe(source(f)).pipe(rename({extname:'.js'}))
                  if (minify) {
                      pipe = pipe.pipe(buffer()).pipe(uglify())
                  }
                  pipe.pipe(gulp.dest('build/files/src'))
              }
          b.plugin(tsify)
          if (update){
              b.plugin(watchify,{})
              b.on('update',()=&gt;{
                  console.log({update:f})
                  bundle()
              })
          }
          b.on('log', console.log)
          console.log(f)
          bundle()
      })
  }
  
  gulp.add('js', () =&gt; combinejs(false, true))
  
  gulp.add('css', () =&gt; {
      gulp.src('src/*.scss')
          .pipe(sass(sassOptions))
          .pipe(gulp.dest('build/files/src'))
  })
  gulp.add('copyFiles', () =&gt; {
      gulp.src(['manifest.json', 'popup.html', 'images/*'], { base: '.' })
          .pipe(gulp.dest('build/files'))
  })
  
  gulp.add("default", ['copyFiles','js', 'css'])
  gulp.add('build',['copyFiles','css'],()=&gt;{
      combinejs(false,false)
  })
  
  gulp.add("watch", ['copyFiles', 'css'], () =&gt; {
      combinejs(true, false)
      gulp.watch('src/*.scss', ['css'])
  })
  </code></pre>