بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ

ABOUT

!Illustration

Lotek is a Script (Joiner / Combiner / Minifier) for HTML, CSS and JavaScript. Pretty helpfull for building asset bundle script into One Small File.

Just try it and you'll love it so much.

#### Author

Crafted with :heart: by Herlangga Sefani (a.k.a Gaibz)

---

HOW TO'S

$3

``
> npm install lotek --save-dev
`

$3

In joiner.js file
`javascript
const Lotek = require("lotek");

const config = {
groups : [
{
// specify group name, for identifier
name : "Production",
// if true, then it will print out file location information inside output file
debug_mode : true,
// configuration for JS File
js : {
files : [
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
"./assets/src/js/script1.js",
"./assets/src/js/script2.js"
],
output : "./assets/dist/bundle.assets.production.min.js",
// if true then content of file will be inside a javascript closure function. ()()
use_closure_per_file : false,
// if true then content of all file will be inside javascript closure function
use_closure_all : false,
// compress output into minified version
minify : true,
// @see :
minify_options : {}
},
// Configuration for CSS Files
css : {
files : [
"https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css",
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.1/css/fileinput.min.css",
"./assets/src/css/style1.css",
"./assets/src/css/style2.css"
],
output : "./assets/dist/bundle.assets.production.min.css",
// For Css This is important, as inside of css files may contain url() linked to another directory
url_replaces : [
{
find : "assets/",
replacement : "../"
},
// ... more
],
// Replace Log Output Filepath
replace_log_output : "./replacer_log.txt",
// compress output into minified version
minify : true,
// @see https://github.com/jakubpawlowicz/clean-css#constructor-options
minify_options: {
// format: 'beautify'
}
},

// Configuration for HTML File
html : {
files : [
"./dev.html"
],
output : "./index.html",
// you may want to change some code inside html for joining
replaces : [
{
find : ,
replacement : ,
},
{
find : ,
replacement : "",
},
{
find : ,
replacement : ,
},
{
find : ,
replacement : "",
},
// ... more
],
// minify html using html-minifier
minify : true,
// @see https://www.npmjs.com/package/html-minifier#options-quick-reference
minify_options : {
removeAttributeQuotes: true,
removeComments : true,
collapseWhitespace : true,
minifyJS : true,
minifyCSS : true,
}
}

}
]
}

new Lotek(config).compile().then(() => {
console.log("Done.");
});
`
Then Simply run in command line
`
> node joiner.js
`

---

Configuration

---

groups[] [Array]
Groups is an array of multiple config to be bundled.

---

groups[].name [String]

Specify Group name for identifier, example : Production, Development, or anything you want.

---

groups[].debug_mode [Boolean]

If set to true, then it will print out file source location inside output file on top of code.

ex : /! File : somedir/somefile.ext /


---

#### Configuration for JS Files


---

groups[].js [Object]

Object of javascript bundle configuration

---

groups[].js.files [Array]

Array of files to be bundled, you can put url from http / https

---

groups[].js.output [String]

Output file of combined and minified javascript code

---

groups[].js.use_closure_per_file [Boolean]

if true then it will make closure per file code, see example output
`javascript
/! Code of original file1.js /
console.log("File 1");
/! Code of original file2.js /
console.log("File 1");


/! Code of output with closure per file set to true /
(() => {
console.log("File 1");
})();
(() => {
console.log("File 2");
})();
`


---

groups[].js.use_closure_all [Boolean]

if true then it will make closure per file code, see example output
`javascript
/! Code of original file1.js /
console.log("File 1");
/! Code of original file2.js /
console.log("File 1");


/! Code of output with closure all set to true /
(() => {
console.log("File 1");
console.log("File 2");
})();
`


---


groups[].js.minify [Boolean]

if true then it will minify the output of all code (Powered by Terser),
see example output
`javascript
/! Code of original file1.js /
console.log("File 1");
/! Code of original file2.js /
console.log("File 1");


/! Code of output with minify to true /
console.log("File 1");console.log("File 2");
`


---

groups[].js.minify_options [Object]

Since I used Terser for minify, please visit Terser Options for better explanation


---


#### Configuration for CSS Files


---


groups[].css [Object]

Object of CSS (Cascading StyleSheet) bundle configuration


---

groups[].css.files [Array]

Array of files to be bundled, you can put url from http / https


---

groups[].css.output [String]

Output file of combined and minified css


---

groups[].css.url_replaces [Array of Object]

For CSS Sometimes you need to specify the path of assets inside CSS, this thing will act like url translator.

For example inside an @import url(...) or background:url(...)

With this configuration it will automatically detect your asset url and refactor into new url by specify find and replacement.

the Object should contain : find and replacement key.

If you have a css file like this (./assets/src/css/style.css) :
`css
/! Example of CSS /
body {
background:url('./images/someimage.png');
}
`

and you set the config like this (./joiner.js):
`javascript
/! Config example /
css = {
files : [
"./assets/src/css/style.css"
],
output : "./assets/dist/bundle.css",
url_replaces : [
{
find : "assets/",
replacement : "../"
}
]
}
`

And the output of CSS should be :
`css
/*!
Without url_replace is set, which will give you wrong path
*/
body {
background:url('./assets/src/css/./images/someimage.png');
}

/*!
With url_replace is set will give you correct path
*/
body {
background:url('./../src/css/./images/someimage.png');
}

/*!
With url_replace is set and minified
*/
body {
background:url('../src/css/images/someimage.png');
}
`

---

groups[].css.replace_log_output [String]

output file for saving replace log


---


groups[].css.minify [Boolean]

if true then it will minify the output of all code (Powered by Clean-CSS),
see example output
`css
/! Code of original style1.css /
body {
cursor: pointer;
background: url('./images/sample1.png');
}
/! Code of original style2.css /
body {
border: 1px solid #ddd;
}


/! Code of output with minify to true /
body{cursor:pointer;background:url(../src/css/images/sample1.png)}body{border:1px solid #ddd}
`


---

groups[].css.minify_options [Object]

Since I used Clean-CSS for minify, please visit Clean CSS Options for better explanation


---

#### Configuration for HTML Files


---


groups[].html [Object]

Object of HTML bundle configuration


---

groups[].html.files [Array]

Array of files to be bundled, you can put url from http / https


---

groups[].html.output [String]

Output file of combined and minified html


---

groups[].css.replaces [Array of Object]

Find and Replace content inside HTML. This is usefull if you want to automatically change source script for development and production.
Just see example (dev.html) :
`html













`

and you set the config like this (./joiner.js):
`javascript
/! Config example /
html = {
files : [
"./dev.html"
],
output : "./index.html",
replaces : [
{
find : ,
replacement : ,
},
{
find : ,
replacement : "",
},
{
find : ,
replacement : ,
},
{
find : ,
replacement : "",
},
]
}
`

And the output of HTML should be :
`html














``

---

groups[].html.minify [Boolean]

if true then it will minify the output of all code (Powered by html-minifier).

---

groups[].html.minify_options [Object]

Since I used html-minifier for minify, please visit HTML Minifier Options for better explanation

---