Replace Gulp with Vite ⚡️

.eslintignore

@@ -1,2 +1 @@
 /dist/
-/public/

.eslintrc.json

@@ -9,7 +9,7 @@
 	},
 	"overrides": [
 		{
-			"files": ["gulpfile.js", "api/*.js"],
+			"files": ["api/*.js"],
 			"env": {
 				"node": true,
 				"browser": false

.gitignore

@@ -302,5 +302,5 @@ $RECYCLE.BIN/
 
 # End of https://www.toptal.com/developers/gitignore/api/node,now,visualstudiocode,webstorm+all,windows,macos,linux
 
-/public
+/dist/
 *.min.svg

.prettierignore

@@ -1,5 +1,4 @@
 *.md
 /dist/
-/public/
 /.vercel/
 pnpm-lock.yaml

gulpfile.js

@@ -1,49 +0,0 @@
-const path = require("path");
-const gulp = require("gulp");
-const postcss = require("gulp-postcss");
-const sass = require("gulp-sass")(require("sass"));
-const sourcemaps = require("gulp-sourcemaps");
-const terser = require("gulp-terser");
-
-const SOURCE_DIR = path.resolve(__dirname, "src");
-const OUTPUT_DIR = path.resolve(__dirname, "public");
-
-function html() {
-	return gulp
-		.src(path.join(SOURCE_DIR, "index.html"))
-		.pipe(gulp.dest(OUTPUT_DIR));
-}
-
-function css() {
-	return gulp
-		.src(path.join(SOURCE_DIR, "scss", "*.scss"))
-		.pipe(sourcemaps.init())
-		.pipe(sass.sync().on("error", sass.logError))
-		.pipe(postcss([require("autoprefixer"), require("postcss-csso")]))
-		.pipe(sourcemaps.write("."))
-		.pipe(gulp.dest(OUTPUT_DIR));
-}
-
-function js() {
-	return gulp
-		.src([path.join(SOURCE_DIR, "main.js"), path.join(SOURCE_DIR, "count.js")])
-		.pipe(sourcemaps.init())
-		.pipe(terser({ ecma: 5 }))
-		.pipe(sourcemaps.write("."))
-		.pipe(gulp.dest(OUTPUT_DIR));
-}
-
-function staticFiles() {
-	return gulp
-		.src(path.join(SOURCE_DIR, "static", "**", "*"))
-		.pipe(gulp.dest(OUTPUT_DIR));
-}
-
-exports.default = gulp.parallel(html, css, js, staticFiles);
-
-exports.watch = () => {
-	gulp.watch(path.join(SOURCE_DIR, "index.html"), html);
-	gulp.watch(path.join(SOURCE_DIR, "scss", "*.scss"), css);
-	gulp.watch(path.join(SOURCE_DIR, "*.js"), js);
-	gulp.watch(path.join(SOURCE_DIR, "static", "**", "*"), staticFiles);
-};

index.html

@@ -1,5 +1,5 @@
 <!--
-	@source: https://github.com/kytta/share2fedi/blob/main/src/index.html
+	@source: https://github.com/kytta/share2fedi/blob/main/index.html
 
 	share2fedi - Instance-agnostic share page for the Fediverse.
 	Copyright (C) 2020-2023  Nikita Karamov <me@kytta.dev>
@@ -32,7 +32,8 @@
 		/>
 		<link rel="canonical" href="https://toot.kytta.dev/" />
 
-		<link href="/style.css" rel="stylesheet" />
+		<script type="module" src="/lib/main.js" async defer></script>
+		<script type="module" src="/lib/count.js" async defer></script>
 
 		<link href="/favicon.ico" rel="icon" type="image/x-icon" />
 		<link href="/apple-touch-icon.png" rel="icon" type="image/svg+xml" />
@@ -91,7 +92,5 @@
 				<a href="https://github.com/kytta/share2fedi">toot on GitHub</a>
 			</section>
 		</footer>
-		<script src="/main.js"></script>
-		<script src="/count.js" async defer></script>
 	</body>
 </html>

lib/count.js

@@ -1,5 +1,5 @@
 /*!
- * @source: https://github.com/kytta/share2fedi/blob/main/src/count.js
+ * @source: https://github.com/kytta/share2fedi/blob/main/lib/count.js
  *
  * @licstart  The following is the entire license notice for the
  *            JavaScript code in this page.

lib/main.js

@@ -1,5 +1,5 @@
 /*!
- * @source: https://github.com/kytta/share2fedi/blob/main/src/main.js
+ * @source: https://github.com/kytta/share2fedi/blob/main/lib/main.js
  *
  * @licstart  The following is the entire license notice for the
  *            JavaScript code in this page.
@@ -26,6 +26,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import "./scss/style.scss";
+
 const INSTANCE_LIST_URL = "https://api.joinmastodon.org/servers";
 const LOCAL_STORAGE_KEY = "recentInstances";
 const RECENT_INSTANCES_SIZE = 5;

lib/scss/_fonts.scss

@@ -1,5 +1,5 @@
 /*
- * @source: https://github.com/kytta/share2fedi/blob/main/src/scss/_fonts.scss
+ * @source: https://github.com/kytta/share2fedi/blob/main/lib/scss/_fonts.scss
  *
  * share2fedi - Instance-agnostic share page for the Fediverse.
  * Copyright (C) 2020-2023  Nikita Karamov <me@kytta.dev>

lib/scss/_variables.scss

@@ -1,5 +1,5 @@
 /*
- * @source: https://github.com/kytta/share2fedi/blob/main/src/scss/_variables.scss
+ * @source: https://github.com/kytta/share2fedi/blob/main/lib/scss/_variables.scss
  *
  * share2fedi - Instance-agnostic share page for the Fediverse.
  * Copyright (C) 2020-2023  Nikita Karamov <me@kytta.dev>

lib/scss/style.scss

@@ -1,5 +1,5 @@
 /*!
- * @source: https://github.com/kytta/share2fedi/blob/main/src/scss/style.scss
+ * @source: https://github.com/kytta/share2fedi/blob/main/lib/scss/style.scss
  *
  * share2fedi - Instance-agnostic share page for the Fediverse.
  * Copyright (C) 2020-2023  Nikita Karamov <me@kytta.dev>

package.json

@@ -10,32 +10,37 @@
 		"url": "https://github.com/kytta/share2fedi.git"
 	},
 	"private": true,
+	"type": "module",
 	"scripts": {
-		"build": "gulp",
+		"build": "vite build",
 		"build-icons": "svgo --multipass assets/pentagon.svg assets/s2f.svg assets/share2fedi.svg -o assets/pentagon.min.svg assets/s2f.min.svg assets/share2fedi.min.svg",
-		"dev": "gulp watch",
+		"dev": "vite",
 		"fmt": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"test": "pnpm run lint",
+		"preview": "vite preview",
-		"serve": "sirv ./public --dev"
+		"test": "pnpm run lint"
 	},
 	"browserslist": "cover 95%, last 2 versions, Firefox ESR, not dead",
 	"devDependencies": {
+		"@vitejs/plugin-legacy": "^4.0.2",
 		"autoprefixer": "^10.4.2",
 		"browserslist": "^4.19.1",
 		"eslint": "^8.35.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-unicorn": "^45.0.2",
-		"gulp": "^4.0.2",
-		"gulp-postcss": "^9.0.1",
-		"gulp-sass": "^5.1.0",
-		"gulp-sourcemaps": "^3.0.0",
-		"gulp-terser": "^2.1.0",
 		"postcss": "^8.4.6",
 		"postcss-csso": "^6.0.0",
 		"prettier": "^2.8.4",
 		"sass": "^1.49.7",
-		"sirv-cli": "^2.0.2",
+		"svgo": "^3.0.1",
-		"svgo": "^3.0.1"
+		"terser": "^5.16.6",
+		"vite": "^4.1.4"
+	},
+	"postcss": {
+		"map": true,
+		"plugins": {
+			"autoprefixer": {},
+			"postcss-csso": {}
+		}
 	}
 }

vite.config.js

@@ -0,0 +1,10 @@
+import legacy from "@vitejs/plugin-legacy";
+
+export default {
+	build: {
+		minify: "terser",
+		terserOptions: { ecma: 5 },
+		sourcemap: "true",
+	},
+	plugins: [legacy()],
+};