browsersync init

.build/browsersync.mjs

@@ -0,0 +1,16 @@
+import bs from 'browser-sync';
+
+bs.init({
+	server: {
+		baseDir: "_site",
+		routes: {
+			"/dist": "./dist",
+		}
+	},
+	files: [
+		'./dist/*'
+	],
+	ui: {
+		port: 3000
+	}
+})

package.json

@@ -9,9 +9,9 @@
     "change-version": "node .build/change-version.mjs",
     "changelog": "node .build/changelog.mjs",
     "generate-sri": "node .build/generate-sri.mjs",
-    "dev": "pnpm run watch",
+    "dev": "pnpm run browsersync & pnpm run watch",
-    "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run img",
     "clean": "rm -rf dist",
+    "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run img",
     "js": "pnpm run js-compile && pnpm run js-minify",
     "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-bundle",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config .build/rollup.config.mjs --sourcemap",
@@ -27,28 +27,23 @@
     "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
-    "watch": "pnpm run watch-css & pnpm run watch-js",
+    "watch": "pnpm run watch-css & pnpm run watch-js & pnpm run watch-jekyll",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
-    "img": "rm -rf dist/css/img && cp -r scss/img dist/css/img",
+    "watch-jekyll": "JEKYLL_ENV=development bundle exec jekyll build --watch --config _config.yml",
+    "img": "pnpm run img-copy",
+    "img-copy": "rm -rf dist/css/img && cp -r scss/img dist/css/img",
     "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore .",
     "bundlewatch": "pnpm run build && bundlewatch",
-    "demo-build": "bundle exec jekyll build",
+    "demo-build": "pnpm run demo-build-jekyll",
     "demo-serve": "bundle exec jekyll serve",
-    "demo-production": "cross-env JEKYLL_ENV=production npm run preview:build --config _config.yml,_config.production.yml",
+    "demo-production": "cross-env JEKYLL_ENV=production npm run demo-build --config _config.yml,_config.production.yml",
-    "demo-preview": "cross-env JEKYLL_ENV=preview npm run preview:build",
+    "demo-preview": "cross-env JEKYLL_ENV=preview npm run demo-build",
     "unused-files": "node .build/unused-files.mjs",
-    "preview:dev": "pnpm run watch",
+    "demo-dev": "pnpm run watch",
-    "preview:clean": "rm -rf dist && rm -rf pages/dist",
+    "demo-images": "for i in ./static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
-    "preview:images": "for i in ./static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
+    "demo-build-jekyll": "JEKYLL_ENV=production bundle exec jekyll build --destination dist --trace --config _config.yml,_config_prod.yml",
-    "preview:build": "pnpm run preview:build-jekyll",
+    "browsersync": "node .build/browsersync.mjs"
-    "preview:build-jekyll": "JEKYLL_ENV=production bundle exec jekyll build --destination dist --trace --config _config.yml,_config_prod.yml",
-    "preview:js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
-    "preview:js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
-    "preview:js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "preview:watch": "pnpm run preview:watch-jekyll & pnpm run watch-js & pnpm run watch-browsersync",
-    "preview:watch-jekyll": "JEKYLL_ENV=development bundle exec jekyll build --watch --destination dist --config _config.yml",
-    "preview:watch-browsersync": "node .build/browser-sync.mjs"
   },
   "repository": {
     "type": "git",
@@ -93,6 +88,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "autoprefixer": "^10.4.17",
+    "browser-sync": "^3.0.2",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.3",
     "cross-env": "^7.0.3",

pnpm-lock.yaml

@@ -84,6 +84,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.17(postcss@8.4.32)
+      browser-sync:
+        specifier: ^3.0.2
+        version: 3.0.2
       bundlewatch:
         specifier: ^0.3.3
         version: 0.3.3