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

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.
  */
@@ -129,6 +135,7 @@ export let Watch: TaskFunction = (done) =>
 
                         if (options["target"] === settings.Target)
                         {
+                            syncer.exit();
                             server.close();
                             done();
                             process.exit();
@@ -142,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.
  */
@@ -150,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(
@@ -243,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));
                                 }
 
@@ -310,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",