How to use Browserify + Watchify + Tsify + Gulp on multiple entry files and get multiple output files quickly

Question

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.

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.

Currently I am looking for a better and faster way of getting this done.

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 => {
        let b = browserify(assign({},watchify.args,{basedir:'src/', entries: f})),
            bundle = () => {
                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',()=>{
                console.log({update:f})
                bundle()
            })
        }
        b.on('log', console.log)
        console.log(f)
        bundle()
    })
}

gulp.add('js', () => combinejs(false, true))

gulp.add('css', () => {
    gulp.src('src/*.scss')
        .pipe(sass(sassOptions))
        .pipe(gulp.dest('build/files/src'))
})
gulp.add('copyFiles', () => {
    gulp.src(['manifest.json', 'popup.html', 'images/*'], { base: '.' })
        .pipe(gulp.dest('build/files'))
})

gulp.add("default", ['copyFiles','js', 'css'])
gulp.add('build',['copyFiles','css'],()=>{
    combinejs(false,false)
})

gulp.add("watch", ['copyFiles', 'css'], () => {
    combinejs(true, false)
    gulp.watch('src/*.scss', ['css'])
})

Answer 1

Make sure you're excluding libraries (like jquery, lodash, etc.)

You might benefit from factor-bundle (specifically gulp-watchify-factor-bundle) to split your entries up but keep their shared code in a separate library. If they have a lot of shared code, it will be compiled and duplicated in each entry's output. tsify + gulp-watchify-factor-bundle doesn't seem to be well documented so here is my guess on what you might need:

const gulp = require("gulp");
const reduce = require("gulp-watchify-factor-bundle");
const buffer = require("vinyl-buffer");
const filelog = require("gulp-filelog");
const tsify = require("tsify");
const gutil = require("gulp-util");

const devenv = true; // bring your own env config


function configuredUglify() {
    return uglify(); // bring your own uglify
}

gulp.task("clean", () => {
    return del("./bin/js");
});

// full builds
gulp.task("build", ["clean"], () => {
    const basedir = __dirname;

    // browserify options here ()
    const b = reduce.create({
        basedir: basedir,
        debug: devenv,
        // the following may not apply to you
        builtins: [],
        insertGlobals: false,
        detectGlobals: false,
        browserField: false,
        commondir: false
    });

    // any large external libraries should be excluded (and loaded via <script src="..."> tags especially for development)
    b.exclude("jquery");
    b.exclude("moment");

    b.plugin(tsify);

    // NOTE: unlike browserify entries, reduce.src allows globs (like gulp.src) but will consider them a single bundle
    // this is especially handy for unit tests!
    return reduce.src(["backScript.ts", "mainFrame.ts", "commentFrame.ts", "script-inject.ts"], { cwd: basedir })
        // "outputs:" is required otherwise the .ts extension is kept (unlike jsify with vanilla browserify)
        // full:
        .pipe(reduce.bundle(b, { common: "sharedLib.js", outputs: ["backScripts.js", "mainFrame.js", "commentFrame.js", "script-inject.js"] }))
        // incrementals:
        // .pipe(reduce.watch(b, { common: "sharedLib.js", outputs: ["backScripts.js", "mainFrame.js", "commentFrame.js", "script-inject.js"] }))

        // incrementals:
        // .on("bundle", (vinylStream) => { /* vinylStream followed by lines below */ })

        .pipe(buffer())
        .pipe(devenv ? sourcemaps.init({ loadMaps: true, largeFile: true }) : gutil.noop()) // largeFile may be applicable
        .pipe(!devenv ? configuredUglify() : gutil.noop())
        .on("error", gutil.log)
        .pipe(devenv ? sourcemaps.write("./") : gutil.noop())
        .pipe(filelog("browserify"))
        .pipe(reduce.dest("./bin/js/"));
});