Add gulp for handling tasks

.eslintrc.cjs

@@ -11,8 +11,9 @@ module.exports = {
     },
     parserOptions: {
         project: [
-            join(__dirname, "jsconfig.json"),
+            join(__dirname, "app.jsconfig.json"),
-            join(__dirname, "eslint.jsconfig.json")
+            join(__dirname, "eslint.jsconfig.json"),
+            join(__dirname, "gulp.tsconfig.json")
         ]
     }
 };

.npmignore

@@ -157,6 +157,10 @@ tsconfig.*.json
 .drone.yml
 .woodpecker.yml
 
+# Build Environment
+gulp/
+gulpfile.ts
+
 # Temporary release-assets
 .tagName.txt
 .tagHeading.txt

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
     "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
-    "javascript.format.placeOpenBraceOnNewLineForFunctions": true
+    "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
+    "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
+    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
+    "typescript.format.placeOpenBraceOnNewLineForFunctions": true
 }

app.jsconfig.json

@@ -1,13 +1,14 @@
 {
-    "extends": "./base.jsconfig.json",
+    "extends": "./tsconfig.base.json",
     "compilerOptions": {
         "allowJs": true,
         "checkJs": true,
+        "composite": true,
         "lib": [
             "DOM"
         ]
     },
     "include": [
-        "./src/**/*"
+        "./src/js/**/*"
     ]
 }

eslint.jsconfig.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./base.jsconfig.json",
+    "extends": "./tsconfig.base.json",
     "include": [
         "./.eslintrc.cjs"
     ]

gulp.tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.base.json",
+    "include": [
+        "./gulpfile.ts",
+        "./gulp/**/*"
+    ]
+}

gulp/Context.ts

@@ -0,0 +1,143 @@
+import { fileURLToPath } from "node:url";
+import path from "upath";
+
+const { join } = path;
+
+/**
+ * Represents the context of the build system.
+ */
+export class Context
+{
+    /**
+     * The directory containing the source files.
+     */
+    private sourceRoot = "src";
+
+    /**
+     * The directory containing the built files.
+     */
+    private outRoot = "lib";
+
+    /**
+     * The name of the directory containing static assets.
+     */
+    private staticRoot = "static";
+
+    /**
+     * The name of the directory containing javascript files.
+     */
+    private jsDir = "js";
+
+    /**
+     * The name of the directory containing css files.
+     */
+    private styleDir = "styles";
+
+    /**
+     * The name of the directory containing assets.
+     */
+    private assetDir = "assets";
+
+    /**
+     * Initializes a new instance of the {@link Context `Context`} class.
+     */
+    public constructor() { }
+
+    /**
+     * Gets the path to the root of the project.
+     */
+    public get ProjectRoot(): string
+    {
+        return join(fileURLToPath(new URL(".", import.meta.url)), "..");
+    }
+
+    /**
+     * Gets the directory containing the source files.
+     */
+    public get SourceRoot(): string
+    {
+        return join(this.ProjectRoot, this.sourceRoot);
+    }
+
+    /**
+     * Gets the directory containing the built files.
+     */
+    public get OutRoot(): string
+    {
+        return join(this.ProjectRoot, this.outRoot);
+    }
+
+    /**
+     * Gets the path of the directory containing static assets.
+     */
+    public get StaticRoot(): string
+    {
+        return join(this.OutRoot, this.staticRoot);
+    }
+
+    /**
+     * Gets the name of the directory containing javascript files.
+     */
+    public get JSDirName(): string
+    {
+        return this.jsDir;
+    }
+
+    /**
+     * Gets the name of the directory containing css files.
+     */
+    public get StyleDirName(): string
+    {
+        return this.styleDir;
+    }
+
+    /**
+     * Gets the name of the directory containing assets.
+     */
+    public get AssetDirName(): string
+    {
+        return this.assetDir;
+    }
+
+    /**
+     * Creates a path relative to the {@link SourceRoot `SourceRoot`}.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The resulting path.
+     */
+    public SourcePath(...path: string[]): string
+    {
+        return join(this.SourceRoot, ...path);
+    }
+
+    /**
+     * Creates a path relative to the {@link OutRoot `OutRoot`}.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The resulting path.
+     */
+    public OutPath(...path: string[]): string
+    {
+        return join(this.OutRoot, ...path);
+    }
+
+    /**
+     * Creates a path relative to the {@link StaticRoot `StaticRoot`}.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The resulting path.
+     */
+    public StaticPath(...path: string[]): string
+    {
+        return join(this.StaticRoot, ...path);
+    }
+}

gulpfile.ts

@@ -0,0 +1,82 @@
+import GulpClient from "gulp";
+import { Context } from "./gulp/Context.js";
+
+const { dest, parallel, src } = GulpClient;
+const context = new Context();
+
+/**
+ * Builds javascript files.
+ *
+ * @returns
+ * The resulting stream.
+ */
+export function JavaScript(): NodeJS.ReadWriteStream
+{
+    return src(context.SourcePath(context.JSDirName, "**", "*.js")).pipe(
+        dest(context.StaticPath(context.JSDirName)));
+}
+
+/**
+ * Builds css files.
+ *
+ * @returns
+ * The resulting stream.
+ */
+export function Styles(): NodeJS.ReadWriteStream
+{
+    return src(context.SourcePath(context.StyleDirName, "**", "*.css")).pipe(
+        dest(context.StaticPath(context.StyleDirName)));
+}
+
+/**
+ * Builds asset files.
+ *
+ * @returns
+ * The resulting stream.
+ */
+export function Assets(): NodeJS.ReadWriteStream
+{
+    return src(context.SourcePath(context.AssetDirName, "**", "*")).pipe(
+        dest(context.StaticPath(context.AssetDirName)));
+}
+
+/**
+ * Builds the web pages.
+ *
+ * @returns
+ * The resulting stream.
+ */
+export function WebPages(): NodeJS.ReadWriteStream
+{
+    return src(context.SourcePath("**", "*.html")).pipe(
+        dest(context.StaticPath()));
+}
+
+/**
+ * Builds all files.
+ */
+export function Build(): Promise<void>
+{
+    return new Promise<void>(
+        (resolve, reject) =>
+        {
+            parallel(
+                [
+                    JavaScript,
+                    Styles,
+                    Assets,
+                    WebPages
+                ])(
+                    (error) =>
+                    {
+                        if (error)
+                        {
+                            reject(error);
+                        }
+                        else
+                        {
+                            resolve();
+                        }
+                    });
+        });
+}

package.json

@@ -1,17 +1,23 @@
 {
   "name": "connect-force",
-  "private": true,
   "version": "0.0.0",
   "type": "module",
   "description": "A selfmade Connect Four game.",
   "author": "Manuel Thalmann <m@nuth.ch>",
   "scripts": {
+    "gulp": "cross-env NODE_OPTIONS=\"--loader ts-node/esm\" gulp",
     "lint": "eslint --max-warnings 0 ./src .eslintrc.cjs",
     "lint-ide": "npm run lint || exit 0"
   },
   "devDependencies": {
     "@manuth/eslint-plugin-typescript": "^4.0.0",
     "@manuth/tsconfig": "^3.0.2",
-    "eslint": "^8.23.1"
+    "@types/gulp": "^4.0.10",
+    "@types/node": "^18.11.10",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.23.1",
+    "gulp": "^4.0.2",
+    "ts-node": "^10.9.1",
+    "upath": "^2.0.1"
   }
 }

tsconfig.base.json

@@ -1,6 +1,7 @@
 {
     "extends": "@manuth/tsconfig/recommended",
     "compilerOptions": {
+        "module": "Node16",
         "allowJs": true,
         "checkJs": true
     }

tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.base.json",
+    "references": [
+        {
+            "path": "./gulp.tsconfig.json"
+        }
+    ],
+    "include": []
+}