chore: Goodbye gulp (#11447)

* Add a script for building assets

* Replace with script executions

* Remove gulp dependencies

* Fix dependencies

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

gulpfile.mjs

-/**
- * Gulp tasks
- */
-
-import * as fs from 'node:fs';
-import gulp from 'gulp';
-import replace from 'gulp-replace';
-import terser from 'gulp-terser';
-import cssnano from 'gulp-cssnano';
-
-import locales from './locales/index.js';
-import meta from './package.json' assert { type: "json" };
-
-gulp.task('copy:backend:views', () =>
-	gulp.src('./packages/backend/src/server/web/views/**/*').pipe(gulp.dest('./packages/backend/built/server/web/views'))
-);
-
-gulp.task('copy:frontend:fonts', () =>
-	gulp.src('./packages/frontend/node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/_frontend_dist_/fonts/'))
-);
-
-gulp.task('copy:frontend:tabler-icons', () =>
-	gulp.src('./packages/frontend/node_modules/@tabler/icons-webfont/**/*').pipe(gulp.dest('./built/_frontend_dist_/tabler-icons/'))
-);
-
-gulp.task('copy:frontend:locales', cb => {
-	fs.mkdirSync('./built/_frontend_dist_/locales', { recursive: true });
-
-	const v = { '_version_': meta.version };
-
-	for (const [lang, locale] of Object.entries(locales)) {
-		fs.writeFileSync(`./built/_frontend_dist_/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
-	}
-
-	cb();
-});
-
-gulp.task('build:backend:script', () => {
-	return gulp.src(['./packages/backend/src/server/web/boot.js', './packages/backend/src/server/web/bios.js', './packages/backend/src/server/web/cli.js'])
-		.pipe(replace('LANGS', JSON.stringify(Object.keys(locales))))
-		.pipe(terser({
-			toplevel: true
-		}))
-		.pipe(gulp.dest('./packages/backend/built/server/web/'));
-});
-
-gulp.task('build:backend:style', () => {
-	return gulp.src(['./packages/backend/src/server/web/style.css', './packages/backend/src/server/web/bios.css', './packages/backend/src/server/web/cli.css', './packages/backend/src/server/web/error.css'])
-		.pipe(cssnano({
-			zindex: false
-		}))
-		.pipe(gulp.dest('./packages/backend/built/server/web/'));
-});
-
-gulp.task('build', gulp.parallel(
-	'copy:frontend:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:frontend:fonts', 'copy:frontend:tabler-icons'
-));
-
-gulp.task('default', gulp.task('build'));
-
-gulp.task('watch', () => {
-	gulp.watch([
-		'./packages/*/src/**/*',
-	], { ignoreInitial: false }, gulp.task('build'));
-});

package.json

@@ -15,7 +15,8 @@
 	"private": true,
 	"scripts": {
 		"build-pre": "node ./scripts/build-pre.js",
-		"build": "pnpm build-pre && pnpm -r build && pnpm gulp",
+		"build-assets": "node ./scripts/build-assets.mjs",
+		"build": "pnpm build-pre && pnpm -r build && pnpm build-assets",
 		"build-storybook": "pnpm --filter frontend build-storybook",
 		"start": "pnpm check:connect && cd packages/backend && node ./built/boot/index.js",
 		"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/index.js",
@@ -23,7 +24,6 @@
 		"migrate": "cd packages/backend && pnpm migrate",
 		"check:connect": "cd packages/backend && pnpm check:connect",
 		"migrateandstart": "pnpm migrate && pnpm start",
-		"gulp": "pnpm exec gulp build",
 		"watch": "pnpm dev",
 		"dev": "node ./scripts/dev.mjs",
 		"lint": "pnpm -r lint",
@@ -34,7 +34,6 @@
 		"jest-and-coverage": "cd packages/backend && pnpm jest-and-coverage",
 		"test": "pnpm -r test",
 		"test-and-coverage": "pnpm -r test-and-coverage",
-		"format": "pnpm exec gulp format",
 		"clean": "node ./scripts/clean.js",
 		"clean-all": "node ./scripts/clean-all.js",
 		"cleanall": "pnpm clean-all"
@@ -45,17 +44,13 @@
 	},
 	"dependencies": {
 		"execa": "8.0.1",
-		"gulp": "4.0.2",
-		"gulp-cssnano": "2.1.3",
-		"gulp-rename": "2.0.0",
-		"gulp-replace": "1.1.4",
-		"gulp-terser": "2.1.0",
+		"cssnano": "6.0.1",
 		"js-yaml": "4.1.0",
+		"postcss": "8.4.27",
+		"terser": "5.19.2",
 		"typescript": "5.2.2"
 	},
 	"devDependencies": {
-		"@types/gulp": "4.0.13",
-		"@types/gulp-rename": "2.0.2",
 		"@typescript-eslint/eslint-plugin": "6.6.0",
 		"@typescript-eslint/parser": "6.6.0",
 		"cross-env": "7.0.3",

packages/frontend/package.json

@@ -98,8 +98,6 @@
 		"@testing-library/vue": "7.0.0",
 		"@types/escape-regexp": "0.0.1",
 		"@types/estree": "1.0.1",
-		"@types/gulp": "4.0.13",
-		"@types/gulp-rename": "2.0.2",
 		"@types/matter-js": "0.19.0",
 		"@types/micromatch": "4.0.2",
 		"@types/node": "20.5.9",

scripts/build-assets.mjs

+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import cssnano from 'cssnano';
+import postcss from 'postcss';
+import * as terser from 'terser';
+
+import locales from '../locales/index.js';
+import meta from '../package.json' assert { type: "json" };
+
+async function copyFrontendFonts() {
+  await fs.cp('./packages/frontend/node_modules/three/examples/fonts', './built/_frontend_dist_/fonts', { dereference: true, recursive: true });
+}
+
+async function copyFrontendTablerIcons() {
+  await fs.cp('./packages/frontend/node_modules/@tabler/icons-webfont', './built/_frontend_dist_/tabler-icons', { dereference: true, recursive: true });
+}
+
+async function copyFrontendLocales() {
+  await fs.mkdir('./built/_frontend_dist_/locales', { recursive: true });
+
+  const v = { '_version_': meta.version };
+
+  for (const [lang, locale] of Object.entries(locales)) {
+    await fs.writeFile(`./built/_frontend_dist_/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
+  }
+}
+
+async function copyBackendViews() {
+  await fs.cp('./packages/backend/src/server/web/views', './packages/backend/built/server/web/views', { recursive: true });
+}
+
+async function buildBackendScript() {
+  await fs.mkdir('./packages/backend/built/server/web', { recursive: true });
+
+  for (const file of [
+    './packages/backend/src/server/web/boot.js',
+    './packages/backend/src/server/web/bios.js',
+    './packages/backend/src/server/web/cli.js'
+  ]) {
+    let source = await fs.readFile(file, { encoding: 'utf-8' });
+    source = source.replaceAll('LANGS', JSON.stringify(Object.keys(locales)));
+    const { code } = await terser.minify(source, { toplevel: true });
+    await fs.writeFile(`./packages/backend/built/server/web/${path.basename(file)}`, code);
+  }
+}
+
+async function buildBackendStyle() {
+  await fs.mkdir('./packages/backend/built/server/web', { recursive: true });
+
+  for (const file of [
+    './packages/backend/src/server/web/style.css',
+    './packages/backend/src/server/web/bios.css',
+    './packages/backend/src/server/web/cli.css',
+    './packages/backend/src/server/web/error.css'
+  ]) {
+    const source = await fs.readFile(file, { encoding: 'utf-8' });
+    const { css } = await postcss([cssnano({ zindex: false })]).process(source, { from: undefined });
+    await fs.writeFile(`./packages/backend/built/server/web/${path.basename(file)}`, css);
+  }
+}
+
+async function build() {
+  await Promise.all([
+    copyFrontendFonts(),
+    copyFrontendTablerIcons(),
+    copyFrontendLocales(),
+    copyBackendViews(),
+    buildBackendScript(),
+    buildBackendStyle(),
+  ]);
+}
+
+await build();
+
+if (process.argv.includes("--watch")) {
+  const watcher = fs.watch('./packages', { recursive: true });
+  for await (const event of watcher) {
+    if (/^[a-z]+\/src/.test(event.filename)) {
+      await build();
+    }
+  }
+}

scripts/dev.mjs

@@ -23,7 +23,13 @@ await execa('pnpm', ['build-pre'], {
 	stderr: process.stderr,
 });
 
-execa('pnpm', ['exec', 'gulp', 'watch'], {
+await execa('pnpm', ['build-assets'], {
+	cwd: _dirname + '/../',
+	stdout: process.stdout,
+	stderr: process.stderr,
+});
+
+execa('pnpm', ['build-assets', '--watch'], {
 	cwd: _dirname + '/../',
 	stdout: process.stdout,
 	stderr: process.stderr,