refactor: replace gulp with 11ty wd-153

.eslintrc.yml

@@ -19,7 +19,7 @@ settings:
       extensions:
         - .js
       map:
-        - ['~', './source/js']
+        - ['~', './source/scripts']
 
 rules:
   semi:
@@ -91,3 +91,7 @@ overrides:
     rules:
       import/no-default-export:
         - off
+  - files:
+    - eleventy.config.cjs
+    env:
+      node: true

Makefile

@@ -5,11 +5,11 @@ clean:
 start:
 	npx concurrently -k -p "{name}: {time}" -n "CLIENT,SERVER" -c "green,blue" "make start_client" "make start_server"
 start_client:
-	NODE_ENV=development npx gulp
+	NODE_ENV=development npx eleventy --serve --quiet
 start_server:
-	npx json-server db/database.json
+	npx json-server source/database.json
 build: clean
-	npx gulp
+	npx eleventy
 
 # Lint
 
@@ -20,7 +20,7 @@ lint_editorconfig:
 lint_html:
 	npx node-w3c-validator -i build/*.html -f lint -evH
 lint_css:
-	npx stylelint "source/css/**/*.css"
+	npx stylelint "source/styles/**/*.css"
 lint_js:
-	npx eslint --ext .js source/js
+	npx eslint --ext .js source/scripts
 lint: lint_fs lint_editorconfig lint_html lint_css lint_js

eleventy.config.cjs

@@ -0,0 +1,220 @@
+const esbuild = require(`esbuild`)
+const lightningcss = require(`lightningcss`)
+const htmlMin = require(`html-minifier-terser`)
+const { existsSync } = require(`fs`)
+const { readFile, writeFile, mkdir } = require(`fs/promises`)
+const browserslist = require(`browserslist`)
+const packageJson = require(`./package.json`)
+const Image = require(`@11ty/eleventy-img`)
+const svgo = require(`svgo`)
+const path = require(`node:path`)
+const fs = require(`node:fs/promises`)
+
+const isDevelopment = process.env.NODE_ENV === `development`
+
+const Path = {
+  CSS: `./source/styles/index.css`,
+  JS: {
+    MAIN: `./source/scripts/index.js`,
+    FORM: `./source/scripts/form.js`,
+  },
+  DB: `./source/database.json`,
+  COPY: [
+    `./source/fonts`,
+    `./source/files`,
+    `./source/sounds`,
+    `./source/manifest.webmanifest`,
+    `./source/favicon.ico`,
+  ],
+}
+
+/** @param {import("@11ty/eleventy").UserConfig} config */
+const init = (config) => {
+  // ignores
+  if (!isDevelopment) {
+    config.ignores.add(`source/pages/form.njk`)
+  }
+
+  // copy
+  Path.COPY.forEach((url) => config.addPassthroughCopy(url))
+
+  // api
+  config.addTemplateFormats(`json`)
+
+  config.addExtension(`json`, {
+    outputFileExtension: `json`,
+    compile: async (_content, url) => {
+      if (url !== Path.DB) {
+        return
+      }
+
+      const database = JSON.parse(await readFile(Path.DB))
+      const isFolderExists = existsSync(`build/api`)
+
+      if (!isFolderExists) {
+        await mkdir(`build/api`)
+      }
+
+      await Promise.all(
+        Object.keys(database).map((databaseKey) => {
+          const payload = JSON.stringify(database[databaseKey])
+
+          return writeFile(`build/api/${databaseKey}.json`, payload)
+        }),
+      )
+    },
+  })
+
+  // html
+  config.addTransform(`html-minify`, async (content, path) => {
+    if (path.endsWith(`.html`)) {
+      return await htmlMin.minify(content, {
+        collapseBooleanAttributes: true,
+        collapseWhitespace: true,
+        removeComments: true,
+      })
+    }
+
+    return content
+  })
+
+  // css
+  config.addTemplateFormats(`css`)
+
+  config.addExtension(`css`, {
+    outputFileExtension: `css`,
+    compile: async (_content, url) => {
+      if (url !== Path.CSS) {
+        return
+      }
+
+      return async () => {
+        const { code, map } = await lightningcss.bundleAsync({
+          filename: url,
+          minify: true,
+          sourceMap: isDevelopment,
+          targets: lightningcss.browserslistToTargets(
+            browserslist(packageJson.browserslist),
+          ),
+        })
+
+        return (
+          code +
+          `\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${map.toString(
+            `base64`,
+          )}*/`
+        )
+      }
+    },
+  })
+
+  // js
+  config.addTemplateFormats(`js`)
+
+  config.addExtension(`js`, {
+    outputFileExtension: `js`,
+    compile: async (_content, url) => {
+      if (url !== Path.JS.MAIN) {
+        return
+      }
+
+      if (isDevelopment) {
+        const {
+          outputFiles: [formOutputFile],
+        } = await esbuild.build({
+          entryPoints: [Path.JS.FORM],
+          target: `es2020`,
+          minify: true,
+          bundle: true,
+          write: false,
+          sourcemap: isDevelopment,
+        })
+
+        const isFolderExists = existsSync(`build/scripts`)
+
+        if (!isFolderExists) {
+          await mkdir(`build/scripts`)
+        }
+
+        await fs.writeFile(`build/scripts/form.js`,formOutputFile.text)
+      }
+
+      return async () => {
+        const {
+          outputFiles: [mainOutputFile],
+        } = await esbuild.build({
+          entryPoints: [url],
+          target: `es2020`,
+          minify: true,
+          bundle: true,
+          write: false,
+          sourcemap: isDevelopment,
+        })
+
+        return mainOutputFile.text
+      }
+    },
+  })
+
+  // png
+  config.addTemplateFormats(`png`)
+
+  config.addExtension(`png`, {
+    outputFileExtension: `png`,
+    compile: async (_content, url) => {
+      return async () => {
+        const {
+          png: [originalImg],
+        } = await Image(url, {
+          dryRun: true,
+          formats: [`png`],
+        })
+
+        if (url.includes(`.photo.`)) {
+          await Image(url, {
+            formats: [`webp`, `avif`],
+            outputDir: `build/images`,
+            filenameFormat: (_id, src, _width, format) => {
+              const extension = path.extname(src)
+              const name = path.basename(src, extension)
+
+              return `${name}.${format}`
+            },
+          })
+        }
+
+        return originalImg.buffer
+      }
+    },
+  })
+
+  // svg
+  config.addTemplateFormats(`svg`)
+
+  config.addExtension(`svg`, {
+    outputFileExtension: `svg`,
+    compile: (content, url) => {
+      return () => {
+        if (url === `./source/images/icons/icon.svg`) {
+          return content
+        }
+
+        return svgo.optimize(content).data
+      }
+    },
+  })
+
+  return {
+    dir: {
+      input: `source`,
+      output: `build`,
+    },
+    dataTemplateEngine: `njk`,
+    markdownTemplateEngine: `njk`,
+    htmlTemplateEngine: `njk`,
+    passthroughFileCopy: true,
+    templateFormats: [`md`, `njk`],
+  }
+}
+
+module.exports = init

jsconfig.json

@@ -1,10 +1,10 @@
 {
-  "include": ["source/js/**/*"],
+  "include": ["source/scripts/**/*"],
   "exclude": ["node_modules/*"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["source/js/*"]
+      "~/*": ["source/scripts/*"]
     }
   }
 }