Building script on NodeJS

.gitignore

@@ -1,3 +1,10 @@
-built.zip
+# Built site
 dist/
+dist.zip
+
+# Node JS
+node_modules/
+package-lock.json
+
+# IDE
 .vscode/

dc09.js

@@ -0,0 +1,181 @@
+const fs = require('fs')
+const cp = require('child_process')
+const process = require('process')
+const deasync = require('deasync')
+const exec = cp.execSync
+
+const less = require('less')
+const CleanCSS = require('clean-css')
+const html = require('html-minifier')
+
+
+const red    = '\033[1;31m'
+const green  = '\033[1;32m'
+const yellow = '\033[1;33m'
+const blue   = '\033[1;34m'
+
+const bold  = '\033[1m'
+const reset = '\033[0m'
+
+
+const minjs   = 'script.min.js'
+const mincss  = 'style.min.css'
+const minhtml = 'index.html'
+const root = ['.domains']
+
+
+main()
+
+
+function main() {
+    switch (process.argv[2]) {
+
+        case 'build':
+            const dir = process.argv[3]
+            if (dir)
+                buildOne(dir)
+            else
+                buildAll()
+            break
+
+        case 'archive':
+            archive()
+            break
+
+        case 'clean':
+            clean()
+            break
+
+        default:
+            print('Available actions:', true)
+            printList([
+                'build',
+                'build <dir>',
+                'archive',
+                'clean',
+            ])
+            break
+    }
+}
+
+
+function buildAll() {
+    buildOne('.')
+}
+
+function buildOne(dir) {
+    print(`${bold}Building:${reset} ${dir}`)
+    fs.mkdirSync(`dist/${dir}`, {recursive: true})
+    print('Minifying JS')
+    minifyJs(dir)
+    print('Rendering LESS')
+    renderLess(dir)
+    print('Minifying CSS')
+    minifyCss(dir)
+    print('Converting paths in HTML')
+    convertPathsHtml(dir)
+    print('Minifying HTML')
+    minifyHtml(dir)
+}
+
+function minifyJs(dir) {
+    const orderFile = `${dir}/js/order.json`
+    let order
+    if (fs.existsSync(orderFile)) {
+        order = JSON.parse(fs.readFileSync(orderFile))
+    }
+    else {
+        print(
+            'Unable to find order.json, skipping',
+            false, '!', yellow,
+        )
+        return
+    }
+    exec(
+        `node_modules/.bin/terser -o "dist/${dir}/${minjs}" ` +
+        order.map(js => `"${dir}/js/${js}"`).join(' ')
+    )
+}
+
+function renderLess(dir) {
+    const content = deasync(less.render)(
+        fs.readFileSync(`${dir}/styles.less`).toString()
+    )
+    fs.writeFileSync(
+        `dist/${dir}/${mincss}`,
+        content.css,
+    )
+}
+
+function minifyCss(dir) {
+    const renderedCss = `dist/${dir}/${mincss}`
+    const content = new CleanCSS().minify(
+        fs.readFileSync(renderedCss)
+    ).styles
+    fs.writeFileSync(renderedCss, content)
+}
+
+function convertPathsHtml(dir) {
+    const scriptRegex = /(?:<script src=['"]?js\/\w+\.js['"]?><\/script>[\s\r\n]*)+/gm
+    const content = fs.readFileSync(`${dir}/index.html`)
+        .toString()
+        .replace(
+            '<script src="https://cdn.jsdelivr.net/npm/less"></script>',
+            ''
+        )
+        .replace(
+            '<link rel="stylesheet/less" type="text/css" href="styles.less" />',
+            `<link rel="stylesheet" href="${mincss}" />`
+        )
+        .replace(
+            scriptRegex,
+            `<script src="${minjs}"></script>`
+        )
+    fs.writeFileSync(`dist/${dir}/${minhtml}`, content)
+}
+
+function minifyHtml(dir) {
+    const convertedHtml = `dist/${dir}/${minhtml}`
+    const content = html.minify(
+        fs.readFileSync(convertedHtml).toString(),
+        {
+            collapseBooleanAttributes: true,
+            collapseInlineTagWhitespace: true,
+            collapseWhitespace: true,
+            removeAttributeQuotes: true,
+            removeComments: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            useShortDoctype: true,
+            keepClosingSlash: false,
+        }
+    )
+    fs.writeFileSync(convertedHtml, content)
+}
+
+
+function archive() {
+    exec('7z a dist.zip dist/*')
+}
+
+function clean() {
+    exec('rm -rf dist/ dist.zip')
+}
+
+
+function print(
+    str,
+    title = false,
+    symbol = '*',
+    color = blue,
+) {
+    console.log(
+        `${color}[${symbol}]${reset} ` +
+        `${title ? bold : ""}${str}${reset}`
+    )
+}
+
+function printList(arr) {
+    for (let item of arr)
+        console.log(`    ${item}`)
+}

index.html

@@ -969,6 +969,14 @@
 						Mars
 					</a>
 				</li>
+				<li class="change-img">
+					<a href="javascript:void(0)" data-img="data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
+						<span class="icon">
+							<i class="fa-regular fa-circle-xmark"></i>
+						</span>
+						Space
+					</a>
+				</li>
 				<li class="change-speed">
 					<a href="javascript:void(0)">
 						<span class="icon">

js/order.json

@@ -0,0 +1,8 @@
+[
+    "anim.js",
+    "script.js",
+    "init.js",
+    "menu.js",
+    "control.js",
+    "handlers.js"
+]

package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "clean-css": "^5.3.1",
+    "deasync": "^0.1.28",
+    "html-minifier": "^4.0.0",
+    "less": "^4.1.3",
+    "terser": "^5.16.1"
+  }
+}