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

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 6

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