Provide the functionality to auto-reload the website on build

.devcontainer/devcontainer.env

@@ -2,7 +2,7 @@ MYSQL_DATABASE=SilverStripe
 MYSQL_ROOT_PASSWORD=root
 
 SS_ENVIRONMENT_TYPE=dev
-SS_BASE_URL=http://localhost:8080
+SS_BASE_URL=http://localhost
 
 SS_DATABASE_CLASS=MySQLPDODatabase
 SS_DATABASE_SERVER=db

.devcontainer/docker-compose.yml

@@ -6,6 +6,8 @@ services:
     env_file: devcontainer.env
     ports:
       - 8080:80
+      - 3000:3000
+      - 3001:3001
     volumes:
       - ..:/vscode/src/mantra
       - ../test/website:/var/www/html

.gulp/Settings.ts

@@ -65,6 +65,11 @@ export class Settings
      */
     private testWebsitePath = "website";
 
+    /**
+     * The name of the theme.
+     */
+    private themeName = "mantra";
+
     /**
      * Initializes a new instance of the `Settings` class.
      *
@@ -237,4 +242,18 @@ export class Settings
     {
         return this.TestPath(this.testWebsitePath, ...path);
     }
+
+    /**
+     * Creates a path relative to the test-theme.
+     *
+     * @param path
+     * The path to join.
+     *
+     * @returns
+     * The joined path.
+     */
+    public TestThemePath(...path: string[])
+    {
+        return this.TestWebsitePath("themes", this.themeName, ...path);
+    }
 }

gulpfile.ts

@@ -1,3 +1,4 @@
+import browserSync = require("browser-sync");
 import browserify = require("browserify");
 import log = require("fancy-log");
 import FileSystem = require("fs-extra");
@@ -24,6 +25,11 @@ import "./.gulp/TaskFunction";
  */
 const watchConnectorPort = 50958;
 
+/**
+ * An object for syncing browsers.
+ */
+let syncer = browserSync.create();
+
 /**
  * The message that is printed when starting the compilation in watch mode.
  */
@@ -90,19 +96,17 @@ export async function Initialize()
         "assets"
     ];
 
-    let themePath = settings.TestWebsitePath("themes", Path.basename(settings.RootPath()));
-
     for (let directory of directories)
     {
         await FileSystem.emptyDir(settings.RootPath(directory));
     }
 
-    if (await FileSystem.pathExists(themePath))
+    if (await FileSystem.pathExists(settings.TestThemePath()))
     {
-        await FileSystem.remove(themePath);
+        await FileSystem.remove(settings.TestThemePath());
     }
 
-    await require("create-symlink")(settings.RootPath(), themePath, { type: "junction" });
+    await require("create-symlink")(settings.RootPath(), settings.TestThemePath(), { type: "junction" });
 }
 
 Initialize.description = "Initializes the project.";
@@ -131,6 +135,7 @@ export let Watch: TaskFunction = (done) =>
 
                         if (options["target"] === settings.Target)
                         {
+                            syncer.exit();
                             server.close();
                             done();
                             process.exit();
@@ -144,6 +149,28 @@ export let Watch: TaskFunction = (done) =>
 
 Watch.description = "Builds the project in watched mode.";
 
+/**
+ * Reloads all browsers using `browser-sync`.
+ */
+function BrowserSync(filePath?: string): TaskFunction
+{
+    let BrowserSync: TaskFunction = (done) =>
+    {
+        if (filePath)
+        {
+            syncer.reload(filePath);
+        }
+        else
+        {
+            syncer.reload();
+        }
+
+        done();
+    };
+
+    return BrowserSync;
+}
+
 /**
  * Builds the project.
  */
@@ -152,8 +179,17 @@ export async function Build()
     if (settings.Watch)
     {
         log.info(watchStartMessage);
-        gulp.watch(settings.ThemeSource("**"), Theme);
-        gulp.watch(settings.TemplateSource("**"), Templates);
+
+        syncer.init({
+            open: false,
+            proxy: "http://localhost",
+            port: 3000,
+            ghostMode: false,
+            online: false
+        });
+
+        gulp.watch(settings.ThemeSource("**"), gulp.series(Theme, BrowserSync("*.css")));
+        gulp.watch(settings.TemplateSource("**"), gulp.series(Templates, BrowserSync()));
     }
 
     await Promise.all(
@@ -245,6 +281,11 @@ export async function Library()
                             {
                                 if (settings.Watch && ((queue.getQueueLength() + queue.getPendingLength()) === 1))
                                 {
+                                    if (errorMessages.length === 0)
+                                    {
+                                        syncer.reload("*.js");
+                                    }
+
                                     log.info(watchFinishMessage(errorMessages.length));
                                 }
 
@@ -296,7 +337,11 @@ export async function Theme()
             sourcemaps: settings.Debug,
             base: settings.StylePath()
         }).pipe(
-            sass({ importer: require("node-sass-tilde-importer") })
+            sass(
+                {
+                    importer: require("node-sass-tilde-importer"),
+                    outputStyle: settings.Debug ? "expanded" : "compressed"
+                })
         ).pipe(
             rename(
                 (parsedPath) =>
@@ -308,11 +353,11 @@ export async function Theme()
             gulp.dest(
                 settings.StylePath(),
                 settings.Debug ?
-                {
-                    sourcemaps: true
-                }
-                :
-                undefined)
+                    {
+                        sourcemaps: true
+                    }
+                    :
+                    undefined)
         );
 }
 

package.json

@@ -8,6 +8,7 @@
     "@manuth/tsconfig": "^1.2.2",
     "@manuth/tslint-presets": "^1.0.4",
     "@types/bootstrap": "^4.3.1",
+    "@types/browser-sync": "^2.26.1",
     "@types/browserify": "^12.0.36",
     "@types/fancy-log": "^1.3.1",
     "@types/fs-extra": "^8.0.0",
@@ -25,6 +26,7 @@
     "@types/vinyl-source-stream": "0.0.30",
     "@types/watchify": "^3.7.4",
     "bootstrap": "^4.3.1",
+    "browser-sync": "^2.26.7",
     "browserify": "^16.5.0",
     "create-symlink": "^1.0.0",
     "fancy-log": "^1.3.3",

src/Templates/Page.ss

@@ -7,7 +7,7 @@
         <% base_tag %>
         $MetaTags()
         <% require themedCSS("mantra") %>
-        <% require themedJavascript("mantra") %>
+        <% require themedJavascript("main") %>
     </head>
     <body class="d-flex flex-column h-100">
         <% if $Menu(1) %>