Add watchify, browserify & other deps

In dev mode this means changes to ts files can now be watched
live.

gulpfile.js

@@ -5,11 +5,37 @@ 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")
@@ -30,8 +56,11 @@ 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", 'sass', "copy-html", "copy-css", function() {
+//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/"
@@ -41,7 +70,10 @@ gulp.task('serve', gulp.series("compile-ts", 'sass', "copy-html", "copy-css", fu
     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);

package.json

@@ -4,12 +4,18 @@
 	"description": "Dice roller for Asphodel. Includes statistical information",
 	"devDependencies": {
 		"@types/chai": "^4.2.14",
+		"@types/jquery": "^3.5.5",
 		"@types/mocha": "^8.2.0",
 		"@types/node": "^14.14.22",
 		"browser-sync": "^2.26.14",
+		"browserify": "^17.0.0",
+		"fancy-log": "^1.3.3",
 		"gulp": "^4.0.2",
 		"gulp-sass": "^4.1.0",
-		"gulp-typescript": "^6.0.0-alpha.1"
+		"gulp-typescript": "^6.0.0-alpha.1",
+		"tsify": "^5.0.2",
+		"vinyl-source-stream": "^2.0.0",
+		"watchify": "^4.0.0"
 	},
 	"dependencies": {
 		"bootstrap": "^5.0.0-beta2",