[README]: Added sections Usage and Images

.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

README.md

@@ -1,6 +1,8 @@
 # asdf-browser-template
 
-This is a template for creating games in the browser with the [asdf-games](https://gitea.arnweb.nl/arne/asdf-games) framework. It works with gulp (and plugins), browserify, tsify, babelify and eslint. These packages allow you to create browser games with asdf in typescript without having to worry about browser compatibility (babel).
+This is a template for creating games in the browser with the [asdf-games](https://gitea.arnweb.nl/arne/asdf-games) framework. It works with gulp, browserify, tsify, babelify, eslint and more other plugins. These packages allow you to create browser games with asdf in typescript without having to worry about browser compatibility (babel) or refreshing your page (live-server & gulp).
+
+## 🏗️ Installation
 
 To get started, clone the repository and run npm:
 ```bash
@@ -8,4 +10,12 @@ git clone https://gitea.arnweb.nl/corner/asdf-browser-template.git && cd asdf-br
 npm i
 ```
 
+## 💻 Usage
+
 You are now ready to rock! Start coding some great games! If you want to transpile your project into valid JS and HTML run `npm run build`. This will create a output.js, output.min.js and an index.html. Open up the index.html in your browser, and there is your game, ready to be distributed.
+
+If you want to get the best developer experience with hot reload, run `npm run watch`. This will launch a browser window with your game. If you change anything in your `src` folder, gulp will re-transpile the project and live-server will then reload the browser page.
+
+## 🖼️ Images
+
+If you want to make use of images in your project, create the folder `src/res`, and place your images in there. The `res` folder will also be transpiled (imagemin minifies the files) and the files are, then, placed in the `dist` folder. The pathnames will also stay the same.

gulpfile.js

@@ -1,60 +1,86 @@
-var gulp = require('gulp')
-const tsify = require('tsify');
-var sourcemaps = require('gulp-sourcemaps');
-const rename = require('gulp-rename');
-const browserify = require('browserify');
-const source = require('vinyl-source-stream');
-const buffer = require('vinyl-buffer');
-const terser = require('gulp-terser');
-const eslint = require('gulp-eslint');
-const babelify = require('babelify');
-const htmlmin = require('gulp-html-minifier-terser');
-const htmlvalidator = require('gulp-html');
+/* eslint-disable @typescript-eslint/no-var-requires */
+const gulp          = require("gulp");
+const tsify         = require("tsify");
+const sourcemaps    = require("gulp-sourcemaps");
+const rename        = require("gulp-rename");
+const browserify    = require("browserify");
+const source        = require("vinyl-source-stream");
+const buffer        = require("vinyl-buffer");
+const terser        = require("gulp-terser");
+const eslint        = require("gulp-eslint");
+const babelify      = require("babelify");
+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.
-       console.log('ESLint results:\n');
-       console.log(`Total Errors: ${results.errorCount}`);
-       let output = '';
-       results.forEach(file => {
-         output += file.filePath + '\n';
-         file.messages.forEach(message => {
-           output += ' - ' + message.message + ' at ' + message.line + ':' + message.column + '\n';
-         });
-         output += '\n';
-       });
-       console.error(output);
+    // Called once for all ESLint results.
+      console.log("ESLint results:\n");
+      console.log(`Total Errors: ${results.errorCount}`);
+      let output = "";
+      results.forEach(file => {
+        output += file.filePath + "\n";
+        file.messages.forEach(message => {
+          output += " - " + message.message + " at " + message.line + ":" + message.column + "\n";
+        });
+        output += "\n";
+      });
+      console.error(output);
     }))
     .pipe(eslint.failAfterError());
 
-  return browserify('src/index.ts')
-     .plugin(tsify, { noImplicitAny: true, target: 'es6' })
-     .transform(babelify, { extensions: [ '.tsx', '.ts' ] })
-     .bundle().on('error', (e) => console.error(e))
-     .pipe(source('output.js'))
-     .pipe(gulp.dest('dist'))
-     .pipe(buffer())
-     .pipe(sourcemaps.init())
-     .pipe(terser())
-     .pipe(rename({ extname: '.min.js' }))
-     .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
-     .pipe(gulp.dest('dist'));
+  return browserify("src/index.ts")
+    .plugin(tsify, { noImplicitAny: true, target: "es6" })
+    .transform(babelify, { extensions: [ ".tsx", ".ts" ] })
+    .bundle().on("error", (e) => console.error(e))
+    .pipe(source("output.js"))
+    .pipe(gulp.dest("dist"))
+    .pipe(buffer())
+    .pipe(sourcemaps.init())
+    .pipe(terser())
+    .pipe(rename({ extname: ".min.js" }))
+    .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
+    .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",