dice-roller/gulpfile.js

let gulp = require("gulp");
let browserSync = require("browser-sync").create();
let sass = require("gulp-sass");

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

var browserify = require("browserify");
var source = require("vinyl-source-stream");
var tsify = require("tsify");

var watchify = require("watchify");
var fancy_log = require("fancy-log");

var paths = { 
	pages: ["src/html/*.html"],
	css: ["src/css/*.css"],
	ts: ["src/ts/frontend.ts"],
};

var watchedBrowserify = watchify(
	browserify({
		basedir: ".",
		debug: true,
		entries: paths.ts,
		cache: {},
		packageCache: {},
	}).plugin(tsify)
);

function bundle() {
	return watchedBrowserify
		.bundle()
		.on("error", fancy_log)
		.pipe(source("bundle.js"))
		.pipe(gulp.dest("dist"));
}

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

gulp.task("copy-css", function () {
  return gulp.src(paths.css).pipe(gulp.dest("dist/css"));
});

gulp.task("compile-ts", function () {
	return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
});

gulp.task("build", gulp.parallel("copy-html", "copy-css", "compile-ts", "sass"));

// Static Server + compile ts + watch scss/html/css files
//gulp.task('serve', gulp.series("compile-ts", "browserify", 'sass', "copy-html", "copy-css", function() {
gulp.task('serve', gulp.series("build", bundle, function() {

    browserSync.init({
        server: "./dist/"
    });

    gulp.watch("src/scss/*.scss", gulp.series('sass'));
    gulp.watch("src/css/*.css").on('change', gulp.series("copy-css"));
    gulp.watch("src/html/*.html").on('change', gulp.series("copy-html"));
    gulp.watch("dist/*.html").on('change', browserSync.reload);
    gulp.watch("dist/*.js").on('change', browserSync.reload);
}));


gulp.task('default', gulp.series('serve'));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);