boilerplate gulpfile for typescript and react with vendor packages

gulpfile.js

'use strict';

const gulp = require('gulp');
const browserify = require('browserify');
const watchify = require('watchify');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del'); // why the fuck does deleting files need separate package
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const tsify = require('tsify');

const TS_FOLDER = './app'
const TS_ENTRYPOINT = TS_FOLDER + '/app.tsx'

const EXTERNALS = ['react', 'react-dom'];

const SASS = './app/**/*.scss';

gulp.task('clean', (cb) => {
    del(['dist/**'], cb);
});

gulp.task('vendor', () => {
    return browserify({ debug: true, require: EXTERNALS })
        .bundle()
        .pipe(source('vendor.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});

function ts_browserify() {
    return browserify({
            debug: true,
            extensions: ['.tsx', '.ts', '.js'],
        })
        .add(TS_ENTRYPOINT)
        .plugin(tsify, {
            target: 'es6',
            noImplicitAny: true,
            jsx: 'react',
            module: 'commonjs'
        })
        .external(EXTERNALS)
        .transform('babelify', {
            only: TS_FOLDER,
            extensions: ['.tsx', '.ts', '.js']
        });
}

function ts_bundle(bundler) {
    function onerror(err) {
        console.error(err.toString());
        console.error(err.codeFrame);
    }

    return bundler.bundle()
        .on('error', function(err) {
            onerror(err);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
}

gulp.task('ts', () => {
    return ts_bundle(ts_browserify());
});

gulp.task('ts:watch', () => {
    let bundler = watchify(ts_browserify());
    let rebundle = () => {
        ts_bundle(bundler);
    };

    bundler.on('update', () => {
        console.log(':: Bundling,', new Date());
        rebundle();
    });

    rebundle();
})

gulp.task('sass', () => {
    gulp.src(SASS)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('bundle.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('sass:watch', ['sass'], () => {
    gulp.watch(SASS, ['sass']);
});

gulp.task('webworker', () => {
    gulp.src(JSX_FOLDER + '/crypto_worker.js')
        .pipe(gulp.dest('./dist'));
});

gulp.task('webworker:watch', () => {
    gulp.watch(JSX_FOLDER + '/crypto_worker.js', ['webworker']);
});

gulp.task('watch', ['ts:watch', 'sass:watch']);
gulp.task('default', ['ts']);