-
-
Notifications
You must be signed in to change notification settings - Fork 0
Build
LiteJS can combine and minimize your web project with ease.
Static Site Generation, Server-Side Rendering, and Client-Side Rendering
Write a working code from beginning and declare your minification rules in your html file when you are ready.
Write dev.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- use `min` attribute to specify minification -->
<link rel="stylesheet" href="app.css" min="min.css">
<!-- `min` without a value will append to previous file -->
<link rel="stylesheet" href="theme.css" min>
</head>
<body>
<script src="app.js" min="min.js"></script>
<script src="model.js" min></script>
<!-- exclude file from production code -->
<script src="debug.js" exclude></script>
</body>
</html>Run command lj build --out=index.html dev.html to get minimized index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="min.css"></head><body><script src="min.js"></script></body></html>-
min.cssandmin.jswill contain all necessary code - run
lj buildwithout options will use options saved inpackage.json#/litejs/build
"litejs": {"build":["--out=ui/index.html ui/dev.html"]}
- banner - Add banner to minimized file.
- exclude - Exclude file from production code.
- if - Add load condition when dynamic code loader is used.
- inline - Embed content to html file. Useful for dynamic code loader to save one round-trip.
-
min - Minimize content to target file.
{hash}will be replaced with git abbrev hash for that file. - cat - Build src file from specified files. Use comma or whitespaces as delimiter for multiple files.
- cat-drop - Configuration Flags applied during source build (cat phase).
- drop - Configuration Flags applied during minification (min phase).
Path-Expansion can be used with min and cat attributes.
-
--assets - URL template for assets when building to a different output directory.
Placeholders:
{h}git hash,{ext}file extension,{name}original file name. Default:{h}.{ext}. Example:--assets="assets/{name}-{h}.{ext}" - --banner - Add commented banner to output.
- --cat - Build src files (default: true).
- --fetch - Fetch remote resources (default: true).
- --min - Minified output file.
- --out - Output file.
- --readme - Replace readme tags in file.
- --ver - Override version string.
- --jsmin - JS minifier command (default: uglifyjs). Files are appended to the command.
- --worker - Update worker file.
Options can also be set in .github/litejs.json:
{
"build": {
"jsmin": "terser -c -m --"
}
}When building to a different directory (--out=build/index.html dev.html),
assets referenced in CSS url() and view templates [src=]
are copied to the output directory with hash-based names using the --assets template.
More examples
<script src="load.js" inline cat="@litejs/ui/load"></script>
<script src="polyfill.js" min="%.min.js" cat="@litejs/ui/polyfill/es5.js" if="!Function.prototype.bind"></script>
<script src="a.js" min="%.min.js?{hash}" banner="MIT LICENSE" cat="@litejs/ui,%/model"></script>Some code can be between toggleable comments.
With drop and cat-drop attributes the builder will flip that comment.
Use drop for the minification phase and cat-drop for the source build phase.
drop="ie8" on a min element will change
/*** ie8 ***/
function a(){
// some code
}
/*/
function a(){}
/**/into
/*** ie8 ***
function a(){
// some code
}
/*/
function a(){}
/**/Often the else part can be omitted
and the flag is used just for removing some code.
Copyright (c) 2013-2025 Lauri Rooden <lauri@rooden.ee>
The MIT License