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 browserifyOpts = {
	basedir: ".",
	debug: true,
	entries: paths.ts,
	cache: {},
	packageCache: {},
}

var browserifyBuildOpts = browserify(browserifyOpts);
var browserifyWatchOpts = browserify(Object.assign({},browserifyOpts));

function browserifyBuild() {
	return browserifyBuildOpts
		.plugin("tsify")
		.bundle()
		.pipe(source("bundle.js"))
		.pipe(gulp.dest("dist"));
};

var watchedBrowserify = watchify(browserifyWatchOpts).plugin("tsify");

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

// Non-injecting SASS
gulp.task('sass-noninject', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass())
        .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/"))
        .pipe(browserSync.stream());
});

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

/*
 * NB: removed pending "do we actually need it" check
 *
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"));
});

// Build without watching
gulp.task("build", gulp.series(
	gulp.parallel("copy-html", "sass-noninject"),
	browserifyBuild
));

gulp.task("build-hs", gulp.parallel("copy-html", "sass"));

// Static Server + compile ts + watch scss/html/css files
gulp.task('serve', gulp.series("build-hs", watchedBundle, 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", watchedBundle);
watchedBrowserify.on("log", fancy_log);