-
-
Notifications
You must be signed in to change notification settings - Fork 0
Build
Lauri Rooden edited this page Apr 30, 2021
·
1 revision
LiteJS can combine and minimize your web project with ease.
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.
- drop - Configuration Flags.
Path-Expansion can be used with min and cat attributes.
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 attribute the builder will flip that comment.
drop="ie8" 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-2023 Lauri Rooden <[email protected]>
The MIT License