Add a task for compiling the theme

.gulp/Settings.ts

@@ -35,6 +35,16 @@ export class Settings
      */
     private libraryPath = "javascript";
 
+    /**
+     * The path to the root of the theme-source.
+     */
+    private themeSource = "Theme";
+
+    /**
+     * The path to save the css-code to.
+     */
+    private stylePath = "css";
+
     /**
      * The path to the test-directory.
      */
@@ -134,6 +144,34 @@ export class Settings
         return this.RootPath(this.libraryPath, ...path);
     }
 
+    /**
+     * Creates a path relative to the root of the theme-source.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The joined path.
+     */
+    public ThemeSource(...path: string[])
+    {
+        return this.SourceRoot(this.themeSource, ...path);
+    }
+
+    /**
+     * Creates a path relative to the directory to save the css-code to.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The joined path.
+     */
+    public StylePath(...path: string[])
+    {
+        return this.RootPath(this.stylePath, ...path);
+    }
+
     /**
      * Creates a path relative to the test-directory.
      *

gulpfile.ts

@@ -4,6 +4,8 @@ import FileSystem = require("fs-extra");
 import { TaskFunction } from "gulp";
 import gulp = require("gulp");
 import gulpIf = require("gulp-if");
+import rename = require("gulp-rename");
+import sass = require("gulp-sass");
 import terser = require("gulp-terser");
 import merge = require("merge-stream");
 import minimist = require("minimist");
@@ -152,7 +154,11 @@ export async function Build()
         log.info(watchStartMessage);
     }
 
-    await Library();
+    await Promise.all(
+        [
+            Library(),
+            Theme()
+        ]);
 }
 
 /**
@@ -276,6 +282,39 @@ export async function Library()
 
 Library.description = "Builds the TypeScript- and JavaScript-library.";
 
+/**
+ * Builds the theme.
+ */
+export async function Theme()
+{
+    return gulp.src(
+        settings.ThemeSource("main.scss"),
+        {
+            sourcemaps: settings.Debug,
+            base: settings.StylePath()
+        }).pipe(
+            sass({ importer: require("node-sass-tilde-importer") })
+        ).pipe(
+            rename(
+                (parsedPath) =>
+                {
+                    parsedPath.dirname = "";
+                    parsedPath.basename = "mantra";
+                })
+        ).pipe(
+            gulp.dest(
+                settings.StylePath(),
+                settings.Debug ?
+                {
+                    sourcemaps: true
+                }
+                :
+                undefined)
+        );
+}
+
+Theme.description = "Builds the theme.";
+
 /**
  * Stops a watch-task.
  */

package.json

@@ -13,6 +13,8 @@
     "@types/fs-extra": "^8.0.0",
     "@types/gulp": "^4.0.6",
     "@types/gulp-if": "0.0.33",
+    "@types/gulp-rename": "0.0.33",
+    "@types/gulp-sass": "^4.0.0",
     "@types/gulp-terser": "^1.2.0",
     "@types/jquery": "^3.3.31",
     "@types/merge-stream": "^1.1.2",
@@ -29,10 +31,13 @@
     "fs-extra": "^8.1.0",
     "gulp": "^4.0.2",
     "gulp-if": "^3.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
     "gulp-terser": "^1.2.0",
     "jquery": "^3.4.1",
     "merge-stream": "^2.0.0",
     "minimist": "^1.2.0",
+    "node-sass-tilde-importer": "^1.0.2",
     "popper.js": "^1.15.0",
     "promise-queue": "^2.2.5",
     "string-argv": "^0.3.1",

src/Theme/main.scss

@@ -0,0 +1 @@
+@import "~bootstrap/scss/bootstrap";