How to minify multiple Javascript files in a folder with UglifyJS?

Question

Hello I'm using uglifyJs to minify my javascript files, it's working well with one file at a time, what I'm loking for is to minify all the javascript files present in a folder called JS into a folder called JSM, to be clear I have 2 files inside my JS folder called test1.js and test2.js and I want to run uglify against that folder and generate test1.min.js and test2.min.js inside the JSM folder, so is there a way to do this? a command like :

uglifyjs -c -m JS/*.js JSM/*.min.js

Or any idea that can help me.

Thanks.

Answer 1

I know it might seem like a huge step but I would really recommend using grunt. It's really simple once you get the hang of it.

Here's a crash course:

1. Install NodeJS

2. Install Grunt CLI (just enter this in console/terminal):

   npm install -g grunt-cli
   

3. Create a simple package.json file in the root of your project:

   {
     "name": "my-project-name",
     "version": "1.0.0",
     "devDependencies": {
       "grunt": "~0.4.2",
       "grunt-contrib-uglify": "~0.2.4",
       "grunt-contrib-watch" : "~0.5.3"
     }
   }
   

4. Once you have that, just type: npm install to the console (in the root of your project). This will install the necessary grunt plugins/dependencies (from the package file above).

5. Now create a simple gruntfile.js in the root of your project (it's a kind of config for your project):

   module.exports = function (grunt) {
       grunt.initConfig({
   
       // define source files and their destinations
       uglify: {
           files: { 
               src: 'js/*.js',  // source files mask
               dest: 'jsm/',    // destination folder
               expand: true,    // allow dynamic building
               flatten: true,   // remove all unnecessary nesting
               ext: '.min.js'   // replace .js to .min.js
           }
       },
       watch: {
           js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
       }
   });
   
   // load plugins
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   
   // register at least this one task
   grunt.registerTask('default', [ 'uglify' ]);
   
   
   };
   

6. Once that's done you just need to build it. Type in the console:

   grunt
   

   or - better - if you type execute the command below - grunt will monitor your source files for changes, and if you change any of them - it will build them automatically:

   grunt watch --force
   

You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.

Answer 2

If you're on Linux/Mac and have access to bash, you can use uglifyjs on multiple JS files like so:

rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done

Answer 3

npm-only way:

1. run:

   npm install uglifyjs-folder --save-dev
   

2. and afterwards add to your package.json something like:

   "uglifyjs": "uglifyjs-folder js -eo jsm"
   

3. then run:

    npm run uglifyjs
   

Please note, if you'd need to generate to the same folder as the source files are (js), following should do the job:

1. run:

   npm install del-cli uglifyjs-folder --save-dev
   

2. and afterwards add to your package.json something like:

   "uglifyjs": "del js/*.min.js; uglifyjs-folder js -eo js"
   

3. then run:

    npm run uglifyjs
   

Answer 4

Further to the above answer, I now have this set up in my .bashrc file:

alias minify='rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done'

Answer 5

uglify-js does not support ES6+ so I suggest to use terser (to install it run npm install terser -g) Below a shell script executing terser recursively for any path:

terser_path.sh

#!/bin/bash

####
# Tiny shell script for terser any JavaScript project
# usage:
# ./terser_path <path_to_your_project>
####

path="$1"

find $path -name '*.js' -type f | while read f
do
    folderpath=$(dirname "$f")
    filename=$(basename "$f") 
    extension="${filename##*.}"
    filename="${filename%.*}"
    nf=$folderpath/$filename.min.$extension

# ----- METHOD 1 : Replace the old file
#    terser "$f" --output "$f" --compress --mangle
# ----- METHOD 2 : Create .min.js file
    terser "$f" --output "$nf" --compress --mangle
     
done

Answer 6

You can use this configuration in gruntfile.js:

uglify: {
        all: {
            files: [{
                expand: true,
                cwd: '<path to js folder>',
                src: ['**/*.js', '!*.min.js'],
                dest: '<path to js folder>',
                ext: '.js'
            }]
        }
    }

Answer 7

make a bat file with start at each row beginning

start uglifyjs app\main.js -mt sort -c -e -o app\main.ug.js
start uglifyjs app\lib.js -mt sort -c -e -r myfunctionname -o app\lib.ug.js
start uglifyjs app\controllers\bbbCtrl.js -mt sort -c  -o     app\controllers\bbbCtrl.ug.js
start uglifyjs app\controllers\aaaCtrl.js -mt sort -c -e -o app\controllers\aaaCtrl.ug.js

Answer 8

you can use this npm module package

 npm i uglify-js-minify-css-allfiles
 npm i uglify-js clean-css

// making index.js file
const minifyAll = require('uglify-js-minify-css-allfiles');

// Folder Name (you will change all files in Folders)
minifyAll('../test/');

npm package site

Answer 9

using uglifyjs with PowerShell on windows.

use Powershell to iterate over all js files in a directory (including child folders if -recurse is supplied) and call uglifyjs command for each one.

Be aware that this code will overwrite the original files with the uglified version. If you don't needed this, change the parameters for the uglifyjs command.

    Get-ChildItem "some directory path" -Recurse -Filter *.js | 
Foreach-Object {
    echo $_.FullName
    uglifyjs $_.FullName -o $_.FullName
}

Answer 10

Using bash script worked for me. You could use different commands or flags instead of uglifyjs "$file" -o "${file%.js}.min.js" -c -m.

To minify all .js files in your current directory as well as in all the sub-directories (NOTE: it has no depth limit so how much deeply nested sub-directories you have it would work on every .js file).

for file in $(find * -type f -iname "*.js"); do
uglifyjs "$file" -o "${file%.js}.min.js" -c -m 
done

Expected result : It will create minified .min.js files of every .js files inside your current directory as well as in all the sub-directories.

Warning : It will loop through all the directories and sub-directories. To limit sub-directory depth add -maxdepth <depth_limit_number>. for example first line could look like this, for file in $(find * -type f -iname "*.js" -maxdepth 3); do, to limit find for 3 sub-directories from your current directory. Use it on your own risk.