Improved build script

- Executing CLI utilities instead of deasync-ing
- Config file `webpage.json` (also replaces order.json)
- Removed Bash build scripts
This commit is contained in:
DarkCat09 2022-12-30 15:35:04 +04:00
parent c5929f55ed
commit ec7e74c39d
7 changed files with 119 additions and 184 deletions

View file

@ -1,2 +0,0 @@
#!/usr/bin/env bash
7z a built.zip dist/*

100
build.sh
View file

@ -1,100 +0,0 @@
#!/usr/bin/env bash
RED='\033[1;31m'
GREEN='\033[1;32m'
YELLOW='\033[1;33m'
BLUE='\033[1;34m'
BOLD='\033[1m'
RESET='\033[0m'
minjs="dist/script.min.js"
mincss="dist/style.min.css"
minhtml="dist/index.html"
minjs_name="script.min.js"
mincss_name="style.min.css"
minhtml_name="index.html"
title() {
echo
echo -e "${BLUE}[*]${RESET} $1"
}
start() {
echo
echo -e "${YELLOW}[+]${RESET} ${BOLD}Building web site in:${RESET}"
echo -e "${BOLD}$PWD${RESET}"
}
success() {
echo
echo -e "${GREEN}[V]${RESET} ${BOLD}Done${RESET}"
echo
}
check_deps() {
which "$1" >/dev/null 2>/dev/null
if [[ $? == 1 ]]; then
echo -e "${RED}[!]${RESET} $1 is required"
echo
exit 1
fi
}
js_minify() {
order=('js/anim.js' 'js/script.js' 'js/init.js' 'js/menu.js' 'js/control.js' 'js/handlers.js')
terser -o "$minjs" ${order[*]}
}
html_minify () {
html-minifier \
--collapse-boolean-attributes \
--collapse-inline-tag-whitespace \
--collapse-whitespace \
--remove-attribute-quotes \
--remove-comments \
--remove-script-type-attributes \
--remove-style-link-type-attributes \
--use-short-doctype \
-o "$minhtml" \
"$1"
}
copy_files() {
exclude=('\.$' '\.git' 'index.html' 'styles.less' 'js' 'dist' 'build.sh' 'html_conv' 'README.md')
items="${exclude[@]}"
regex="${items//[[:space:]]/|}"
find -maxdepth 1 -exec bash -c "if [[ {} =~ $regex ]]; then :; else cp -r {} dist/; fi" \;
}
start
title "Creating dist/"
mkdir -p dist/
title "Checking dependencies"
check_deps terser
check_deps lessc
check_deps cleancss
check_deps html-minifier
check_deps python3
title "Minifying JS"
js_minify
title "Converting LESS"
lessc "styles.less" "$mincss"
title "Minifying CSS"
cleancss -o "$mincss" "$mincss"
title "Editing HTML"
cat index.html | python3 html_conv.py "$minjs_name" "$mincss_name" >"$minhtml"
title "Minifying HTML"
html_minify "$minhtml"
title "Copying other files"
copy_files
success

View file

@ -1,2 +0,0 @@
#!/usr/bin/env bash
rm -rf dist/ built.zip

121
dc09.js
View file

@ -1,10 +1,14 @@
const fs = require('fs')
const path = require('path')
const cp = require('child_process')
const process = require('process')
const deasync = require('deasync')
const exec = cp.execSync
//const exec = cp.execSync
const exec = (cmd) => {
console.log(`Exec: ${cmd}`)
return cp.execSync(cmd)
}
const less = require('less')
const CleanCSS = require('clean-css')
const html = require('html-minifier')
@ -20,8 +24,6 @@ const reset = '\033[0m'
const minjs = 'script.min.js'
const mincss = 'style.min.css'
const minhtml = 'index.html'
const root = ['.domains']
main()
@ -61,63 +63,77 @@ function main() {
function buildAll() {
buildOne('.')
print('Completed', true, 'V', green)
}
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))
const config = `${dir}/webpage.json`
let files
if (fs.existsSync(config)) {
files = JSON.parse(fs.readFileSync(config))
}
else {
print(
'Unable to find order.json, skipping',
'Unable to find webpage.json, skipping',
false, '!', yellow,
)
return
}
print('Minifying JS')
minifyJs(dir, files)
print('Rendering LESS')
renderLess(dir, files)
print('Minifying CSS')
minifyCss(dir, files)
print('Converting paths in HTML')
convertPathsHtml(dir, files)
print('Minifying HTML')
minifyHtml(dir, files)
}
function minifyJs(dir, files) {
files.js = files.js || []
if (files.js.length == 0) return;
exec(
`node_modules/.bin/terser -o "dist/${dir}/${minjs}" ` +
order.map(js => `"${dir}/js/${js}"`).join(' ')
'node_modules/.bin/terser --compress --mangle ' +
`-o "dist/${dir}/${minjs}" ` +
files.js.map(js => `"${dir}/${js}"`).join(' ')
)
}
function renderLess(dir) {
const content = deasync(less.render)(
fs.readFileSync(`${dir}/styles.less`).toString()
)
fs.writeFileSync(
`dist/${dir}/${mincss}`,
content.css,
function renderLess(dir, files) {
files.less = files.less || []
if (files.less.length == 0) return;
rendered = path.resolve(`dist/${dir}/${mincss}`)
exec(
'node_modules/.bin/lessc ' +
files.less.map(less => `"${dir}/${less}"`).join(' ') +
` "${rendered}"`
)
files.css = [
...(files.css || []),
rendered,
]
}
function minifyCss(dir) {
const renderedCss = `dist/${dir}/${mincss}`
const content = new CleanCSS().minify(
fs.readFileSync(renderedCss)
).styles
fs.writeFileSync(renderedCss, content)
function minifyCss(dir, files) {
files.css = files.css || []
if (files.css.length == 0) return;
const content = new CleanCSS().minify(files.css).styles
fs.writeFileSync(`dist/${dir}/${mincss}`, content)
}
function convertPathsHtml(dir) {
function convertPathsHtml(dir, files) {
const scriptRegex = /(?:<script src=['"]?js\/\w+\.js['"]?><\/script>[\s\r\n]*)+/gm
const content = fs.readFileSync(`${dir}/index.html`)
const converted = []
files.html = files.html || []
for (let file of files.html) {
const content = fs.readFileSync(`${dir}/${file}`)
.toString()
.replace(
'<script src="https://cdn.jsdelivr.net/npm/less"></script>',
@ -131,13 +147,21 @@ function convertPathsHtml(dir) {
scriptRegex,
`<script src="${minjs}"></script>`
)
fs.writeFileSync(`dist/${dir}/${minhtml}`, content)
const built = path.resolve(`dist/${dir}/${file}`)
fs.writeFileSync(built, content)
converted.push(built)
}
files.html = converted
}
function minifyHtml(dir) {
const convertedHtml = `dist/${dir}/${minhtml}`
function minifyHtml(dir, files) {
files.html = files.html || []
for (let file of files.html) {
const isAbs = path.isAbsolute(file)
const name = (isAbs ? file : `${dir}/${file}`)
const built = (isAbs ? file : `dist/${dir}/${file}`)
const content = html.minify(
fs.readFileSync(convertedHtml).toString(),
fs.readFileSync(name).toString(),
{
collapseBooleanAttributes: true,
collapseInlineTagWhitespace: true,
@ -150,7 +174,8 @@ function minifyHtml(dir) {
keepClosingSlash: false,
}
)
fs.writeFileSync(convertedHtml, content)
fs.writeFileSync(built, content)
}
}
@ -159,7 +184,13 @@ function archive() {
}
function clean() {
exec('rm -rf dist/ dist.zip')
fs.rmSync('dist/', {
recursive: true,
force: true,
})
fs.rmSync('dist.zip', {
force: true,
})
}

View file

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

View file

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

17
webpage.json Normal file
View file

@ -0,0 +1,17 @@
{
"html": ["index.html"],
"less": ["styles.less"],
"css": [],
"js": [
"js/anim.js",
"js/script.js",
"js/init.js",
"js/menu.js",
"js/control.js",
"js/handlers.js"
],
"files": [
"img/", "svg/", "fontawesome/",
".domains"
]
}