Bash Bundle! (2Bs)

It is a bash script that would assist web developer to optimize and combine the client-side(javascript, cascade style sheet) code into the separated files. At the end of processing, if there is no problem, it would create two files as app.js and app.css.
Not like a traditional structure style, that we need use many files in head block, and keep them in order. Once a project becomes a big with many developers, it almost can mess around us.

My objective is, to make people smile by managing a less files, and keep a clean head.
It's on the move.
I'm happy to release a new version 1.4.8

Roadmap

Version	Date	Description
1.4.3	2024-Jan	Clean up
1.4.4	2024-Mar	Fix environment
1.4.5	2024-Mar	Add a new line while merging every file and clear a file before merge was fixed
1.4.6	2024-Mar	Fix empty file
1.4.7	2024-Apr	Rename build-bundle.sh to bash-bundle.sh, and fix on macos to make sure it works in both platforms, linux and macos

Command list

----------------------------------------------------------------------------------
//-- help ------------------------------------------------------------------------
    $ bash bash-bundle.sh help

----------------------------------------------------------------------------------
//-- init bash-bundle env -------------------------------------------------------
    $ bash bash-bundle.sh init

----------------------------------------------------------------------------------
//-- the use of an environment ---------------------------------------------------
  The command below will run a default environment with keeping the reserve files
    $ bash bash-bundle.sh

  pro is an environment that removes the reserve compression files
    $ bash bash-bundle.sh env=pro

  with another environment
    $ bash bash-bundle.sh env=dev

----------------------------------------------------------------------------------
//-- update the compression libraries --------------------------------------------
    $ bash bash-bundle.sh update

First step

Prepare your structue files like below or look at figure 1

Note:

  Please make sure by keeping files in order to avoid the reference
  functions and variables are undefined or not found.

assests
	| modules
		| 0_module1
		| 1_module2
			| css
				| 0_name.css
			| js
				| 0_name.js

Second step

Download bash-bundle.sh and copy to alongside of your 'assets' directory assets All module names has to name by using prefix as number and add underscore '_'. The number must be positive value, it has to starts from 0 to 99. Each module name has to contains js and css folder that obtain files too. All the files has to put prefix in order the same as module structure too. It does not care about your suffix name 1_xxxxxx

figure 1:

Third step

This bash file requires 'Nodejs' and 'NPM' are already installation to compress those js and css. Then it will start installing any dependencies base on npm package requirements

$ bash bash-bundle.sh init

If you wanna manually install npm's package

1. uglifycss:
   is a port of YUI Compressor to NodeJS for its CSS part.

   Installation:

   Global installation uses -g

   $ npm install uglifycss -g
   

   Local installation

   $ npm install uglifycss
   

2. terser: A JavaScript parser and mangler/compressor toolkit for ES6+.

   Installation:

   Local instaltion

   $ npm install terser
   

Execute

Normally, the script is not be able to execute because of permission.
Grant execute permission in short code

$ sudo chmod +x bash-bundle.sh
or
$ chmod +x bash-bundle.sh

Start now

$ bash bash-bundle.sh

Then it overwrites and/or created 4 files.

1. app.base.css
2. app.css
3. app.base.js
4. app.js

Note:

'app.base.css' and 'app.base.js' are not yet compress. It makes us to know the plain structure and easy to track any error.

Starting >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Combining CSS ...
Combining JS ...
Find them ...
> ./assets/app.base.css
> ./assets/app.css
> ./assets/app.base.js
> ./assets/app.js
Done <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Note:

In production, please add argument 'env=pro' to remove 'app.base.css' and 'app.base.js'.
By default it won't need env=pro

$ ./bash-bundle.sh env=pro
or
$ sh bash-bundle.sh env=pro
or
$ bash bash-bundle.sh env=pro

figure 2:

Finally, 'app.js' and 'app.css' were generated in your drive if everything worked properly.

figure 3:

To Support my work, please donate me via Buy me a Coffee