Browse Source

swap browser-sync -> webpack-dev-server

pull/559/head
Jake Jarvis 1 month ago
parent
commit
28fc884aee
Signed by: jake GPG Key ID: 2B0C9CF251E69A39
  1. 32
      gulpfile.js
  2. 4
      package.json
  3. 19
      webpack.config.js
  4. 1433
      yarn.lock

32
gulpfile.js

@ -1,11 +1,8 @@
import path from "path";
import { fileURLToPath } from "url";
import del from "del";
import gulp from "gulp";
import { task as execa } from "gulp-execa";
import cache from "gulp-cache";
import htmlmin from "gulp-html-minifier-terser";
import BrowserSync from "browser-sync";
import del from "del";
// use up-to-date imagemin plugins instead of those bundled with gulp-imagemin:
import imagemin from "gulp-imagemin";
@ -14,9 +11,6 @@ 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 __dirname = path.dirname(fileURLToPath(import.meta.url));
gulp.task("default", gulp.series(
clean,
npx("webpack", ["--mode", "production"]),
@ -30,9 +24,8 @@ gulp.task("default", gulp.series(
gulp.task("serve", gulp.series(
clean,
gulp.parallel(
npx("webpack", ["--watch", "--mode", "development"]),
npx("webpack", ["serve", "--mode", "development"]),
npx("hugo", ["--watch", "--buildDrafts", "--buildFuture", "--verbose"]),
startServer,
),
));
@ -47,27 +40,6 @@ function 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: "./" })

4
package.json

@ -59,14 +59,13 @@
"@babel/eslint-parser": "^7.15.4",
"@babel/preset-env": "^7.15.6",
"@jakejarvis/eslint-config": "*",
"@percy/cli": "^1.0.0-beta.67",
"@percy/cli": "^1.0.0-beta.68",
"@types/numeral": "^2.0.1",
"@types/twemoji": "^12.1.2",
"@types/url-parse": "^1.4.4",
"autoprefixer": "^10.3.4",
"babel-loader": "^8.2.2",
"babel-plugin-template-html-minifier": "^4.1.0",
"browser-sync": "^2.27.5",
"clean-css": "^5.1.5",
"copy-webpack-plugin": "^9.0.1",
"core-js": "^3.17.3",
@ -118,6 +117,7 @@
"webpack": "^5.52.1",
"webpack-assets-manifest": "^5.0.6",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1",
"webpack-subresource-integrity": "^5.0.0"
},
"optionalDependencies": {

19
webpack.config.js

@ -2,7 +2,6 @@ import path from "path";
import { fileURLToPath } from "url";
import webpack from "webpack";
import WebpackAssetsManifest from "webpack-assets-manifest";
import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
import CopyPlugin from "copy-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
@ -59,16 +58,16 @@ export default {
},
],
}),
new SubresourceIntegrityPlugin({
enabled: true,
hashFuncNames: ["sha384"],
}),
new WebpackAssetsManifest({
writeToDisk: true, // allow Hugo to access file in dev mode
output: path.resolve(__dirname, "data/manifest.json"),
publicPath: true,
integrity: true,
integrityHashes: ["sha384"],
customize: (entry) => {
// don't add thousands of unneeded twemoji graphics to the manifest
if (entry.key.startsWith("emoji/")) return false;
},
}),
],
module: {
@ -219,4 +218,14 @@ export default {
}),
],
},
devServer: {
static: {
directory: path.join(__dirname, "public"),
watch: true,
},
host: "0.0.0.0", // weird docker bind behavior
port: process.env.PORT || 1337,
compress: true,
liveReload: true,
},
};

1433
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save