بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ
ABOUT
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 ❤️ by Herlangga Sefani (a.k.a Gaibz)
HOW TO'S
Installation
> npm install lotek --save-dev
Usage
In joiner.js
file
const 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 : <https://www.npmjs.com/package/terser#compress-options> 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 : `<link href="./assets/src/css/style1.css" rel="stylesheet" />` replacement : `<link href='./assets/dist/bundle.assets.production.min.css' rel='stylesheet' />` find : `<link href="./assets/src/css/style2.css" rel="stylesheet" />` replacement : "" find : `<script src="./assets/src/js/script1.js"></script>` replacement : `<script src="./assets/dist/bundle.assets.production.min.js"></script>` find : `<script src="./assets/src/js/script2.js"></script>` 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 config;
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
/*! Code of original file1.js */console;/*! Code of original file2.js */console; /*! Code of output with closure per file set to true */ { console;}; { console;};
groups[].js.use_closure_all [Boolean]
if true then it will make closure per file code, see example output
/*! Code of original file1.js */console;/*! Code of original file2.js */console; /*! Code of output with closure all set to true */ { console; console;};
groups[].js.minify [Boolean]
if true then it will minify the output of all code (Powered by Terser),
see example output
/*! Code of original file1.js */console;/*! Code of original file2.js */console; /*! Code of output with minify to true */console;console;
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) :
/*! Example of CSS */
and you set the config like this (./joiner.js):
/*! 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 :
/*! Without url_replace is set, which will give you wrong path */ /*! With url_replace is set will give you correct path */ /*! With url_replace is set and minified*/
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
/*! Code of original style1.css *//*! Code of original style2.css */ /*! Code of output with minify to true */
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) :
Some Title
and you set the config like this (./joiner.js):
/*! Config example */html = files : "./dev.html" output : "./index.html" replaces : find : `<link href="./assets/src/css/style1.css" rel="stylesheet" />` replacement : `<link href='./assets/dist/bundle.assets.production.min.css' rel='stylesheet' />` find : `<link href="./assets/src/css/style2.css" rel="stylesheet" />` replacement : "" find : `<script src="./assets/src/js/script1.js"></script>` replacement : `<script src="./assets/dist/bundle.assets.production.min.js"></script>` find : `<script src="./assets/src/js/script2.js"></script>` replacement : ""
And the output of HTML should be :
<!-- File : ./dev.html --> Some Title
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