Merge and Uglify JavaScript files in one step! It works similar to sass. That means you have to prepend all partials with a _filename.js (underscore) and need a root JavaScript file in which you use import 'path/to/file'; to specify the files you want to merge. (uglify-merge-js uses uglify-js). You can also just merge a complete folder with JavaScript files without the Root JavaScript file.
You need NodeJS to use uglify-merge-js. If you already have NodeJS then just use this command to install it:
npm install uglify-merge-jsThis is a example how you could use uglify-merge.js. -s is the absolute source folder and -o is the ouput file which is relative to the source folder.
uglify-merge -s path/to/source/folder -o ../path/to/output/file.min.jsYou should also check out the other Arguments that you can use.
This is how you should structure your JavaScript folder. It is important that every partials JavaScript file begins with a underscore (_).
- javascript
- subfolder
- _partial_3.js
- _partial_1.js
- _partial_2.js
- root.js
- subfolder
The Root.js file list all files that should be included in the uglify-merge process.
import 'partial_1';
import 'partial_2';
import 'subfolder/partial_3';
//import 'subfolder/partial_4'; // Uncomment with // to exclude files /**/ is not supportedSometimes you need to link directly to a file that don't have a underscore (_). You can achive this by including a exclamation mark (!) before the file name.
import '../vendor/components/jquery/!jquery.slim';
If you want to include external sources via http then just include them like this:
import 'https://example.com/jQuery.js';Please note that the file get cached. If you would like to download the file any time when using uglify-merge-js then you should use the nocache option -n
uglify-merge-js accept following Arguments:
- Argument:
--src - Alias:
-s - Type:
String - Default:
./(current folder)
Give the source folder where uglify-merge-js should start
- Argument:
--output - Alias:
-o - Type:
String - Default:
scripts.min.js
Specify the file name under which the reduced and merged file should be saved. You can also use ../../dist/js/filename.min.js to access other folders (starting from source folder)
- Argument:
--uglify - Alias:
-u - Type:
String
Manipulate the uglify-js api options. You need to provide a valid json string.
uglify-merge -s path/to/source/folder -o ../path/to/output/file.min.js -u '{"mangle":{"reserved":"yourVariable"}}'In some cases you have to use another syntax for the --uglify paramater. For Example if you use the JetBrains File Watcher then you need to provide the Argument like this: -u "{\"mangle\":{\"reserved\":\"yourVariable\"}}"
- Argument:
--charset - Alias:
-c - Type:
String - Default:
utf8
Set the charset with which you want to encode
- Argument:
--all - Alias:
-a - Type:
Boolean - Default:
false
Set this parameter if you want to merge without root JavaScript file. This deactivates the sass pattern variant and you have to delete the root.js. All JavaScript files will be read from the --src folder
uglify-merge -s path/to/source/folder -o ../path/to/output/file.min.js -a- Argument:
--recursive - Alias:
-r - Type:
Boolean - Default:
false
Optionally set this parameter with --all to include subfolders as well
uglify-merge -s path/to/source/folder -o ../path/to/output/file.min.js -a -r- Argument:
--quiet - Alias:
-q - Type:
Boolean - Default:
false
Hide the output during the process. So you have it a bit clearer in the shell window
- Argument:
--nocache - Alias:
-n - Type:
Boolean - Default:
false
Don't cache external resources.
- Argument:
--help - Alias:
-h - Type:
Boolean - Default:
false
Print usage guide