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:
parent
c5929f55ed
commit
ec7e74c39d
7 changed files with 119 additions and 184 deletions
|
@ -1,2 +0,0 @@
|
||||||
#!/usr/bin/env bash
|
|
||||||
7z a built.zip dist/*
|
|
100
build.sh
100
build.sh
|
@ -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
|
|
2
clean.sh
2
clean.sh
|
@ -1,2 +0,0 @@
|
||||||
#!/usr/bin/env bash
|
|
||||||
rm -rf dist/ built.zip
|
|
121
dc09.js
121
dc09.js
|
@ -1,10 +1,14 @@
|
||||||
const fs = require('fs')
|
const fs = require('fs')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
const cp = require('child_process')
|
const cp = require('child_process')
|
||||||
const process = require('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 CleanCSS = require('clean-css')
|
||||||
const html = require('html-minifier')
|
const html = require('html-minifier')
|
||||||
|
|
||||||
|
@ -20,8 +24,6 @@ const reset = '\033[0m'
|
||||||
|
|
||||||
const minjs = 'script.min.js'
|
const minjs = 'script.min.js'
|
||||||
const mincss = 'style.min.css'
|
const mincss = 'style.min.css'
|
||||||
const minhtml = 'index.html'
|
|
||||||
const root = ['.domains']
|
|
||||||
|
|
||||||
|
|
||||||
main()
|
main()
|
||||||
|
@ -61,63 +63,77 @@ function main() {
|
||||||
|
|
||||||
function buildAll() {
|
function buildAll() {
|
||||||
buildOne('.')
|
buildOne('.')
|
||||||
|
print('Completed', true, 'V', green)
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildOne(dir) {
|
function buildOne(dir) {
|
||||||
|
|
||||||
print(`${bold}Building:${reset} ${dir}`)
|
print(`${bold}Building:${reset} ${dir}`)
|
||||||
fs.mkdirSync(`dist/${dir}`, {recursive: true})
|
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 config = `${dir}/webpage.json`
|
||||||
const orderFile = `${dir}/js/order.json`
|
let files
|
||||||
let order
|
if (fs.existsSync(config)) {
|
||||||
if (fs.existsSync(orderFile)) {
|
files = JSON.parse(fs.readFileSync(config))
|
||||||
order = JSON.parse(fs.readFileSync(orderFile))
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
print(
|
print(
|
||||||
'Unable to find order.json, skipping',
|
'Unable to find webpage.json, skipping',
|
||||||
false, '!', yellow,
|
false, '!', yellow,
|
||||||
)
|
)
|
||||||
return
|
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(
|
exec(
|
||||||
`node_modules/.bin/terser -o "dist/${dir}/${minjs}" ` +
|
'node_modules/.bin/terser --compress --mangle ' +
|
||||||
order.map(js => `"${dir}/js/${js}"`).join(' ')
|
`-o "dist/${dir}/${minjs}" ` +
|
||||||
|
files.js.map(js => `"${dir}/${js}"`).join(' ')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderLess(dir) {
|
function renderLess(dir, files) {
|
||||||
const content = deasync(less.render)(
|
files.less = files.less || []
|
||||||
fs.readFileSync(`${dir}/styles.less`).toString()
|
if (files.less.length == 0) return;
|
||||||
)
|
rendered = path.resolve(`dist/${dir}/${mincss}`)
|
||||||
fs.writeFileSync(
|
exec(
|
||||||
`dist/${dir}/${mincss}`,
|
'node_modules/.bin/lessc ' +
|
||||||
content.css,
|
files.less.map(less => `"${dir}/${less}"`).join(' ') +
|
||||||
|
` "${rendered}"`
|
||||||
)
|
)
|
||||||
|
files.css = [
|
||||||
|
...(files.css || []),
|
||||||
|
rendered,
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
function minifyCss(dir) {
|
function minifyCss(dir, files) {
|
||||||
const renderedCss = `dist/${dir}/${mincss}`
|
files.css = files.css || []
|
||||||
const content = new CleanCSS().minify(
|
if (files.css.length == 0) return;
|
||||||
fs.readFileSync(renderedCss)
|
const content = new CleanCSS().minify(files.css).styles
|
||||||
).styles
|
fs.writeFileSync(`dist/${dir}/${mincss}`, content)
|
||||||
fs.writeFileSync(renderedCss, content)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertPathsHtml(dir) {
|
function convertPathsHtml(dir, files) {
|
||||||
const scriptRegex = /(?:<script src=['"]?js\/\w+\.js['"]?><\/script>[\s\r\n]*)+/gm
|
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()
|
.toString()
|
||||||
.replace(
|
.replace(
|
||||||
'<script src="https://cdn.jsdelivr.net/npm/less"></script>',
|
'<script src="https://cdn.jsdelivr.net/npm/less"></script>',
|
||||||
|
@ -131,13 +147,21 @@ function convertPathsHtml(dir) {
|
||||||
scriptRegex,
|
scriptRegex,
|
||||||
`<script src="${minjs}"></script>`
|
`<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) {
|
function minifyHtml(dir, files) {
|
||||||
const convertedHtml = `dist/${dir}/${minhtml}`
|
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(
|
const content = html.minify(
|
||||||
fs.readFileSync(convertedHtml).toString(),
|
fs.readFileSync(name).toString(),
|
||||||
{
|
{
|
||||||
collapseBooleanAttributes: true,
|
collapseBooleanAttributes: true,
|
||||||
collapseInlineTagWhitespace: true,
|
collapseInlineTagWhitespace: true,
|
||||||
|
@ -150,7 +174,8 @@ function minifyHtml(dir) {
|
||||||
keepClosingSlash: false,
|
keepClosingSlash: false,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
fs.writeFileSync(convertedHtml, content)
|
fs.writeFileSync(built, content)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -159,7 +184,13 @@ function archive() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function clean() {
|
function clean() {
|
||||||
exec('rm -rf dist/ dist.zip')
|
fs.rmSync('dist/', {
|
||||||
|
recursive: true,
|
||||||
|
force: true,
|
||||||
|
})
|
||||||
|
fs.rmSync('dist.zip', {
|
||||||
|
force: true,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
[
|
|
||||||
"anim.js",
|
|
||||||
"script.js",
|
|
||||||
"init.js",
|
|
||||||
"menu.js",
|
|
||||||
"control.js",
|
|
||||||
"handlers.js"
|
|
||||||
]
|
|
|
@ -1,7 +1,6 @@
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"clean-css": "^5.3.1",
|
"clean-css": "^5.3.1",
|
||||||
"deasync": "^0.1.28",
|
|
||||||
"html-minifier": "^4.0.0",
|
"html-minifier": "^4.0.0",
|
||||||
"less": "^4.1.3",
|
"less": "^4.1.3",
|
||||||
"terser": "^5.16.1"
|
"terser": "^5.16.1"
|
||||||
|
|
17
webpage.json
Normal file
17
webpage.json
Normal 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"
|
||||||
|
]
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue