Typescript -> Babelify -> Browserify -> Uglify Buildchain in Gulp

Question

I have a buildchain set up in Gulp, but whenever I run the gulp command it only uses one of the two entry points I provide. I am trying to combine the two methods from here:

https://fettblog.eu/gulp-browserify-multiple-bundles/

and here:

https://gist.github.com/frasaleksander/4f7b08b9e0e5cea03919a43372c53d4e

/var/www/website/gulpfile.js

//////////////
// IMPORTS //
/////////////

//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var es = require('event-stream');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');

//JS Dependencies
var tsify = require('tsify');
var watchify = require('watchify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;


/////////////
// CONFIG //
////////////

var babelconfig = {
    presets: ['@babel/preset-env'],
    extensions: ['.ts']
}

var tsconfig = {
    "moduleResolution": "node",
    "target": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "lib": [
        "DOM",
        "ES2015",
        "ES2015.Iterable"
    ]
}

//////////////////
// JAVA SCRIPT //
/////////////////

//JS entry points
var mains = glob.sync('src/js/**/*-main.ts');
mains.forEach(val => {
    console.log("main: " + val);
})
//Watchify Object
var watchJS = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: mains,
    cache: {},
    packageCahce: {}
})).plugin(tsify, tsconfig);

///////////////
// DEFAULTS //
//////////////

gulp.task('default', () => {
    var tasks = mains.map(function (entry) {
        watchJS.entries = [entry];
        return watchJS
            .transform('babelify', babelconfig)
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                console.log("dirname: " + opt.dirname);
                console.log("basename: " + opt.basename);
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/js\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .on('end', () => {
                console.log("write sourcemapse: " + entry);
            })
            .pipe(gulp.dest('dist/js/'))
    });
    return es.merge.apply(null, tasks);
});

//Same as the above, but not a callback function so it can be called below
function js() {
    var tasks = mains.map(function (entry) {
        watchJS.entries = [entry];
        console.log('starting ' + watchJS.entries);
        return watchJS
            .transform('babelify', babelconfig)
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/js\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('dist/js/'))
    });
}


watchJS.on('update', js);
watchJS.on('log', log);

And here is the output after running gulp:

main: src/js/projects/tesseract/tesseract-main.ts
main: src/js/writings/dead-battery-main.ts
[10:03:35] Using gulpfile /var/www/website/gulpfile.js
[10:03:35] Starting 'default'...
[10:03:42] 3817638 bytes written (3.15 seconds)
dirname: src/js/writings
basename: dead-battery-main
write sourcemapse: src/js/writings/dead-battery-main.ts

As you can see both of the entry points I would like to compile are in the mains array however only one ever finishes. The weirdest part is is I take out the babelify transform both compilations finish. If I'm understanding things correctly without the babelify my JS won't be able to function on nearly as many browsers, otherwise I would just take it out.

My overall goal is to have a build chain that globs all the .*-main.ts files as entry points in src/js/ and spits them out as es5/bundled/minified files in their respective dist/js directories. I would also be more than happy to throw all this out the window and start from scratch is someone can link a guide that sheds some like on a Typescript->Babel->Browserify->Uglify buildchain. Thanks.

KingOfEphrya KingOfEphrya · Accepted Answer · 2020-01-19T01:32:04

I fixed it by removing watchify from the equation on using gulp.watch instead. Here is my gulpfile.js now:

//////////////
// IMPORTS //
/////////////

//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');

//JS Dependencies
var tsify = require('tsify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;

//CSS Dependencies
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

/////////////
// CONFIG //
////////////

//Babel Compiler Options
var babelconfig = {
    presets: ['@babel/preset-env'],
    extensions: ['.ts']
}

//TS Compiler Options
var tsconfig = {
    "moduleResolution": "node",
    "target": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "lib": [
        "DOM",
        "ES2015",
        "ES2015.Iterable"
    ]
}

//Personal Config for easy path changing
var config = {
    dev: {
        sass: './src/sass/**/*.scss',
        ts: './src/ts/**/*.ts',
        entries: './src/ts/**/*-main.ts'
    },
    prod: {
        css: './dist/css/',
        html: './',
        js: './dist/js/'
    }
};

//Livereload stuff
livereload({ start: true });

//////////////////
// JAVA SCRIPT //
/////////////////

gulp.task('js', (done) => {
    var tasks = glob.sync(config.dev.entries).map(function (entry) {
        log('started building ' + entry);
        return browserify()
            .add(entry)
            .plugin(tsify, tsconfig)
            .transform('babelify', babelconfig).on('error', (err) => { log("babel error: " + err); })
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/ts\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(config.prod.js)).on('end', () => { log("finished building " + entry); }
            );
    });
    livereload();
    done();
});

gulp.task('watchJS', () => {
    gulp.watch(config.dev.ts,
        gulp.series('js')
    );
});

//////////
// CSS //
/////////

gulp.task('css', () => {
    return gulp.src(config.dev.sass, { base: './' })
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.prod.css))
        .pipe(livereload()
        );
});

gulp.task('watchCSS', () => {
    gulp.watch(config.dev.sass,
        gulp.series('css')
    );
});

///////////////
// DEFAULTS //
//////////////

gulp.task('watch', () => {
    livereload.listen();
    gulp.watch(config.dev.sass, gulp.series('css'));
    gulp.watch(config.dev.ts, gulp.series('js'));
});

gulp.task('default',
    gulp.series([
        'css',
        'js',
        'watch'
    ]
    )
);

This is the file that helped me out the most:

https://gist.github.com/johnstew/44c247246f1e08790e24

Typescript -> Babelify -> Browserify -> Uglify Buildchain in Gulp

1 Answers