webpack-dev-server -> browser-sync via gulp

README.md

@@ -15,7 +15,7 @@ I keep an ongoing list of [post ideas](https://github.com/jakejarvis/jarv.is/iss
 
 ### 🧶  Using Yarn:
 
-Run `yarn install` and `yarn start`, then open [http://localhost:1337/](http://localhost:1337/). ([Yarn must be installed](https://yarnpkg.com/en/docs/install) first; NPM _should_ also work at your own risk.) Hugo, [Webpack](https://webpack.js.org/), and [Gulp](https://gulpjs.com/) will automatically work together to build the site, and pages will live-refresh when source files are changed.
+Run `yarn install` and `yarn start`, then open [http://localhost:1337/](http://localhost:1337/). ([Yarn must be installed](https://yarnpkg.com/en/docs/install) first; NPM _should_ also work at your own risk.) Hugo, [Webpack](https://webpack.js.org/), and [Gulp](https://gulpjs.com/) will automatically work together to build the site, and pages will live-refresh via [Browsersync](https://browsersync.io/) when source files are changed.
 
 ### ▲  Using [`vercel dev`](https://vercel.com/docs/cli#commands/dev):
 

content/_index.md

@@ -1,11 +1,14 @@
 ---
 title: "Jake Jarvis – Front-End Web Developer in Boston, MA 👨‍💻"
-date: 2021-05-26 21:40:49-0400
+date: 2021-06-14 11:07:25-0400
 type: home
 sitemap:
   priority: 1.0
 ---
 
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+
 # Hi there! I'm Jake. <span class="wave">👋</span>
 
 ## I'm a frontend web developer based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" title="&quot;Boston Accent Trailer - Late Night with Seth Meyers&quot; on YouTube" id="boston" target="_blank" rel="noopener">Boston, MA</a>.
@@ -26,3 +29,6 @@ Over the years, some of my side projects
 <a href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" title="&quot;Your Next Client? The CEO&#39;s Son&quot; on Advertising Age" id="news-7" target="_blank" rel="noopener">outlets</a>.
 
 You can find more of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener">GitHub</a> and <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener">LinkedIn</a>, and I'm always open to connect over <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a> <sup id="key" class="monospace"><a class="no-underline" href="/pubkey.asc" title="My Public Key" id="pgp" target="_blank" rel="pgpkey authn noopener">🔐 2B0C 9CF2 51E6 9A39</a></sup>, <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener">Twitter</a>, or <a href="sms:+1-617-917-3737" title="Send SMS to +1 (617) 917-3737" id="sms">SMS</a> as well!
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->

gulpfile.js

@@ -1,3 +1,6 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import BrowserSync from "browser-sync";
 import gulp from "gulp";
 import { task as execa } from "gulp-execa";
 import htmlmin from "gulp-html-minifier-terser";
@@ -10,6 +13,10 @@ import imageminPngquant from "imagemin-pngquant";
 import imageminGifsicle from "imagemin-gifsicle";
 import imageminSvgo from "imagemin-svgo";
 
+// https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#what-do-i-use-instead-of-__dirname-and-__filename
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 gulp.task("default", gulp.series(
   clean,
   npx("webpack", ["--mode", "production"]),
@@ -21,27 +28,47 @@ gulp.task("default", gulp.series(
 ));
 
 gulp.task("serve", gulp.parallel(
-  npx("webpack", ["serve", "--mode", "development", "--progress", "profile"]),
+  npx("webpack", ["--watch", "--mode", "development"]),
   npx("hugo", ["--watch", "--buildDrafts", "--buildFuture", "--verbose"]),
+  startServer,
 ));
 
 gulp.task("clean", clean);
 
+function startServer() {
+  const browserSync = BrowserSync.create();
+  const publicDir = path.resolve(__dirname, "public");
+
+  browserSync.init({
+    server: {
+      baseDir: publicDir,
+    },
+    port: process.env.PORT || 1337,
+    reloadDelay: 1000, // delay to prevent double-refresh from hugo & webpack negotiating
+    open: false,
+    ui: false,
+    notify: true,
+    localOnly: true,
+  });
+
+  return gulp
+    .watch("public/**/*")
+    .on("change", browserSync.reload);
+}
+
 function optimizeHtml() {
   return gulp
     .src("public/**/*.html", { base: "./" })
     .pipe(
-      htmlmin(
-        {
-          html5: true,
-          preserveLineBreaks: true,
-          collapseWhitespace: true,
-          collapseBooleanAttributes: true,
-          removeComments: true,
-          minifyCSS: true,
-          minifyJS: false,
-        }
-      )
+      htmlmin({
+        html5: true,
+        preserveLineBreaks: true,
+        collapseWhitespace: true,
+        collapseBooleanAttributes: true,
+        removeComments: true,
+        minifyCSS: true,
+        minifyJS: false,
+      })
     )
     .pipe(gulp.dest(".", { overwrite: true }));
 }

package.json

@@ -37,7 +37,6 @@
     "@sentry/node": "^6.9.0",
     "cross-fetch": "3.1.4",
     "dayjs": "1.10.6",
-    "dotenv": "^10.0.0",
     "fast-xml-parser": "^3.19.0",
     "faunadb": "^4.3.0",
     "graphql": "^15.5.1",
@@ -64,9 +63,10 @@
     "@vercel/node": "^1.11.1",
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
+    "browser-sync": "^2.27.4",
     "clean-css": "^5.1.3",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.0.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
     "del": "^6.0.0",
     "eslint": "~7.30.0",
@@ -112,7 +112,6 @@
     "webpack": "^5.44.0",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
     "webpack-subresource-integrity": "^1.5.2"
   },
   "optionalDependencies": {

webpack.config.js

@@ -177,11 +177,4 @@ export default {
       }),
     ],
   },
-  devServer: {
-    port: process.env.PORT || 1337,
-    contentBase: path.join(__dirname, "public/"),
-    watchContentBase: true,
-    publicPath: "/assets/",
-    compress: true,
-  },
 };