gulpfile.js

const gulp = require("gulp");
const typescript = require("gulp-typescript");
const sourcemaps = require("gulp-sourcemaps");
const browserify = require("browserify");
const uglify = require("gulp-uglify-es").default;
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sass = require("gulp-sass");
const del = require("del");

const paths = {

    typescript: {

        dir: "ts/",
        allFiles: "ts/**/*.ts",
        tsconfig: "ts/tsconfig.json"

    },

    javascript: {

        dir: "js/",
        allFiles: "js/**/*.js",
        entryPoint: "js/main.js",
        entryPointFileName: "main.js"

    },

    styles: {

        dir: "styles/",

        css: {

            dir: "styles/",
            allFiles: "styles/**/*.css*"

        },

        scss: {

            dir: "styles/sass/",
            allFiles: "styles/sass/**/*.scss",
            cache: "styles/sass/.sass-cache/"

        }

    }

};

let typescriptProject = typescript.createProject(paths.typescript.tsconfig);

// The default Gulp task.
gulp.task("default", defaultTask);

// Cleans (deletes) all generated/compiled files.
gulp.task("clean", clean);

// Builds the entire project.
gulp.task("build", build);

// Cleans and builds the entire project.
gulp.task("rebuild", rebuild);

// Compile/build through the entire pipeline from TypeScript files to a browser-ready bundle.
gulp.task("build-js", buildJavaScriptPipeline);

// Compile/build all relevant stylesheets.
gulp.task("build-styles", buildStylesPipeline);

// Watch for changes to relevant files and compile-on-change.
gulp.task("watch", watch);

function defaultTask(done) {

    return rebuild(done);

}

function clean(done) {

    return del([
        paths.javascript.dir,
        paths.styles.css.allFiles,
        paths.styles.scss.cache
    ]);

}

function build(done) {

    gulp.parallel(
        buildJavaScriptPipeline,
        buildStylesPipeline
    )(done);

}

function rebuild(done) {

    gulp.series(clean, build)(done);

}

function buildJavaScriptPipeline(done) {

    return gulp.series(
        compileTypeScript,
        browserifyJavaScript,
        uglifyJavaScript
    )(done);

}

function compileTypeScript(done) {

    return typescriptProject.src()
        .pipe(sourcemaps.init())
        .pipe(typescriptProject()).js
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(paths.javascript.dir));

}

function browserifyJavaScript(done) {

    return browserify({
            transform: [["babelify", { "presets": ["@babel/preset-env"] }]],
            debug: true,
            entries: [paths.javascript.entryPointFileName],
            basedir: paths.javascript.dir,
            cache: {},
            packageCache: {}
        }).bundle()
        .pipe(source("bundle.js"))
        .pipe(buffer())
        .pipe(gulp.dest(paths.javascript.dir));

}

function uglifyJavaScript(done) {

    return gulp.src(paths.javascript.allFiles)
        .pipe(uglify())
        .pipe(gulp.dest(paths.javascript.dir));

}

function buildStylesPipeline(done){

    return compileSCSS(done);

}

function compileSCSS(done) {

    return gulp.src(paths.styles.scss.allFiles)
        .pipe(sourcemaps.init())
        .pipe(sass.sync().on("error", sass.logError))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(paths.styles.css.dir));

}

function watch(done) {

    gulp.parallel(watchTypeScript, watchSCSS)(done);

}

function watchTypeScript(done) {

    gulp.watch([paths.typescript.allFiles], compileTypeScript);

}

function watchSCSS(done) {

    gulp.watch([paths.styles.scss.allFiles], compileSCSS);

}