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 :heart: by Herlangga Sefani (a.k.a Gaibz)

HOW TO'S

Installation

> npm install lotek --save-dev

Usage

In joiner.js file

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 : <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,
                    }
                }
   
            }
        ]
}

new Lotek(config).compile().then(() => {
    console.log("Done.");
}); 

Then Simply run in command line

> node joiner.js

Configuration

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.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.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

/*! 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

/*! 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) :

/*! Example of CSS */
body {
    background:url('./images/someimage.png');
}

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 
*/
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

/*! 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) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Some Title</title>
    <link href="./assets/src/css/style1.css" rel="stylesheet" />
    <link href="./assets/src/css/style2.css" rel="stylesheet" />
</head>
<body>
    <script src="./assets/src/js/script1.js"></script>
    <script src="./assets/src/js/script2.js"></script>
</body>
</html>

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 --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Some Title</title>
    <link href='./assets/dist/bundle.assets.production.min.css' rel='stylesheet' />
    
</head>
<body>
    <script src="./assets/dist/bundle.assets.production.min.js"></script>
    
</body>
</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