.devcontainer/devcontainer.env

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

.devcontainer/docker-compose.yml

@@ -6,8 +6,6 @@ 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,11 +65,6 @@ export class Settings
      */
     private testWebsitePath = "website";
 
-    /**
-     * The name of the theme.
-     */
-    private themeName = "mantra";
-
     /**
      * Initializes a new instance of the `Settings` class.
      *
@@ -242,18 +237,4 @@ 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,4 +1,3 @@
-import browserSync = require("browser-sync");
 import browserify = require("browserify");
 import log = require("fancy-log");
 import FileSystem = require("fs-extra");
@@ -25,11 +24,6 @@ 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.
  */
@@ -96,17 +90,19 @@ 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(settings.TestThemePath()))
+    if (await FileSystem.pathExists(themePath))
     {
-        await FileSystem.remove(settings.TestThemePath());
+        await FileSystem.remove(themePath);
     }
 
-    await require("create-symlink")(settings.RootPath(), settings.TestThemePath(), { type: "junction" });
+    await require("create-symlink")(settings.RootPath(), themePath, { type: "junction" });
 }
 
 Initialize.description = "Initializes the project.";
@@ -135,7 +131,6 @@ export let Watch: TaskFunction = (done) =>
 
                         if (options["target"] === settings.Target)
                         {
-                            syncer.exit();
                             server.close();
                             done();
                             process.exit();
@@ -149,28 +144,6 @@ 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.
  */
@@ -179,17 +152,8 @@ export async function Build()
     if (settings.Watch)
     {
         log.info(watchStartMessage);
-
+        gulp.watch(settings.ThemeSource("**"), Theme);
-        syncer.init({
+        gulp.watch(settings.TemplateSource("**"), Templates);
-            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(
@@ -281,11 +245,6 @@ export async function Library()
                             {
                                 if (settings.Watch && ((queue.getQueueLength() + queue.getPendingLength()) === 1))
                                 {
-                                    if (errorMessages.length === 0)
-                                    {
-                                        syncer.reload("*.js");
-                                    }
-
                                     log.info(watchFinishMessage(errorMessages.length));
                                 }
 
@@ -337,11 +296,7 @@ export async function Theme()
             sourcemaps: settings.Debug,
             base: settings.StylePath()
         }).pipe(
-            sass(
+            sass({ importer: require("node-sass-tilde-importer") })
-                {
-                    importer: require("node-sass-tilde-importer"),
-                    outputStyle: settings.Debug ? "expanded" : "compressed"
-                })
         ).pipe(
             rename(
                 (parsedPath) =>

package.json

@@ -8,7 +8,6 @@
     "@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",
@@ -26,7 +25,6 @@
     "@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("main") %>
+        <% require themedJavascript("mantra") %>
     </head>
     <body class="d-flex flex-column h-100">
         <% if $Menu(1) %>