script-joiner v1.1.0

ABOUT

Node Simple Script Joiner (Combiner) and Minifier for HTML, CSS and JavaScript. Pretty helpfull for building asset bundle script into One File.

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

Author

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

ROADMAP

HOW TO'S

Installation

> npm install script-joiner --save-dev

Usage

In joiner.js file

const Joiner = require("script-joiner");

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_replace : [
                        {
                            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'
                    }
                }   
            }
        ]
}

new Joiner(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_replace 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 replace. the Object should contain : find and replace 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_replace : [
        {
            find : "assets/",
            replace : "../"        
        }
    ]
}

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