[script]: Added watch script

.eslintrc.js

@@ -4,12 +4,17 @@ module.exports = {
   plugins: [
     '@typescript-eslint',
   ],
+  env: {
+      "node": true,
+      "browser": true
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
   ],
   rules: {
-    "@typescript-eslint/no-empty-function": "off"
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/explicit-function-return-type": "off"
   }
 };

.gitignore

@@ -1,2 +1,4 @@
 dist
 node_modules
+._.*
+.DS_Store

gulpfile.js

@@ -1,60 +1,86 @@
-var gulp = require('gulp')
+/* eslint-disable @typescript-eslint/no-var-requires */
-const tsify = require('tsify');
+const gulp          = require("gulp");
-var sourcemaps = require('gulp-sourcemaps');
+const tsify         = require("tsify");
-const rename = require('gulp-rename');
+const sourcemaps    = require("gulp-sourcemaps");
-const browserify = require('browserify');
+const rename        = require("gulp-rename");
-const source = require('vinyl-source-stream');
+const browserify    = require("browserify");
-const buffer = require('vinyl-buffer');
+const source        = require("vinyl-source-stream");
-const terser = require('gulp-terser');
+const buffer        = require("vinyl-buffer");
-const eslint = require('gulp-eslint');
+const terser        = require("gulp-terser");
-const babelify = require('babelify');
+const eslint        = require("gulp-eslint");
-const htmlmin = require('gulp-html-minifier-terser');
+const babelify      = require("babelify");
-const htmlvalidator = require('gulp-html');
+const htmlmin       = require("gulp-html-minifier-terser");
+const htmlvalidator = require("gulp-html");
+const imagemin      = require('gulp-imagemin');
+const gulpif        = require('gulp-if');
+const clean         = require('gulp-dest-clean');
 
 const html = () => {
-  return gulp.src('src/index.html')
+  return gulp.src("src/index.html")
     .pipe(htmlvalidator())
     .pipe(htmlmin({
       removeComments: true,
       collapseWhitespace: true,
       collapseBooleanAttributes: true,
       collapseInlineTagWhitespace: true,
-      removeRedundantAttributes: true
+      removeRedundantAttributes: true,
+      minifyCSS: true
     }))
-    .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest("dist"));
-}
+};
 
 const js = () => {
-  gulp.src(['src/**/*.ts', '!node_modules/**'])
+  gulp.src(["src/**/*.ts", "!node_modules/**"])
     .pipe(eslint({quiet: true}))
     .pipe(eslint.results(results => {
-    	 // Called once for all ESLint results.
+    // Called once for all ESLint results.
-       console.log('ESLint results:\n');
+      console.log("ESLint results:\n");
-       console.log(`Total Errors: ${results.errorCount}`);
+      console.log(`Total Errors: ${results.errorCount}`);
-       let output = '';
+      let output = "";
-       results.forEach(file => {
+      results.forEach(file => {
-         output += file.filePath + '\n';
+        output += file.filePath + "\n";
-         file.messages.forEach(message => {
+        file.messages.forEach(message => {
-           output += ' - ' + message.message + ' at ' + message.line + ':' + message.column + '\n';
+          output += " - " + message.message + " at " + message.line + ":" + message.column + "\n";
-         });
+        });
-         output += '\n';
+        output += "\n";
-       });
+      });
-       console.error(output);
+      console.error(output);
     }))
     .pipe(eslint.failAfterError());
 
-  return browserify('src/index.ts')
+  return browserify("src/index.ts")
-     .plugin(tsify, { noImplicitAny: true, target: 'es6' })
+    .plugin(tsify, { noImplicitAny: true, target: "es6" })
-     .transform(babelify, { extensions: [ '.tsx', '.ts' ] })
+    .transform(babelify, { extensions: [ ".tsx", ".ts" ] })
-     .bundle().on('error', (e) => console.error(e))
+    .bundle().on("error", (e) => console.error(e))
-     .pipe(source('output.js'))
+    .pipe(source("output.js"))
-     .pipe(gulp.dest('dist'))
+    .pipe(gulp.dest("dist"))
-     .pipe(buffer())
+    .pipe(buffer())
-     .pipe(sourcemaps.init())
+    .pipe(sourcemaps.init())
-     .pipe(terser())
+    .pipe(terser())
-     .pipe(rename({ extname: '.min.js' }))
+    .pipe(rename({ extname: ".min.js" }))
-     .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
+    .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
-     .pipe(gulp.dest('dist'));
+    .pipe(gulp.dest("dist"));
 };
 
-exports.default = gulp.parallel(js, html);
+const res = () => {
+  return gulp.src("src/res/*")
+    .pipe(clean("dist/res"))
+    .pipe(gulpif(
+      file => file.basename.match(/\.png|jpg|jpeg|gif|svg/gmi) !== [],
+      imagemin()
+    ))
+    .pipe(gulp.dest("dist/res"));
+};
+
+exports.default = gulp.parallel(js, html, res);
+
+exports.watch = () => {
+  console.log("Transpiling current files...");
+  js();
+  html();
+  res();
+  console.log("Watching for changes!");
+  gulp.watch(["src/**/*.js", "src/**/*.ts"], js);
+  gulp.watch("src/*.html", html);
+  gulp.watch("src/res/*", res);
+};

package.json

@@ -4,7 +4,8 @@
   "description": "A template for creating games for the browser with asdf-games.",
   "main": "src/index.ts",
   "scripts": {
-    "build": "gulp"
+    "build": "gulp",
+    "watch": "concurrently \"live-server dist\" \"gulp watch\""
   },
   "keywords": [
     "asdf",
@@ -23,14 +24,19 @@
     "@typescript-eslint/parser": "^2.28.0",
     "babelify": "^10.0.0",
     "browserify": "^16.5.1",
+    "concurrently": "^5.1.0",
     "eslint": "^6.8.0",
     "gulp": "^4.0.2",
+    "gulp-dest-clean": "^0.5.0",
     "gulp-eslint": "^6.0.0",
     "gulp-html": "^2.0.0",
     "gulp-html-minifier-terser": "^6.0.0",
+    "gulp-if": "^3.0.0",
+    "gulp-imagemin": "^7.1.0",
     "gulp-rename": "^2.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
+    "live-server": "^1.2.1",
     "tsify": "^4.0.1",
     "typescript": "^3.8.3",
     "vinyl-buffer": "^1.0.1",