How can I minify multiple JavaScript files in a folder with UglifyJS?

Question

I'm using UglifyJS to minify my JavaScript files. It's working well with one file at a time. What I'm looking for is to minify all the JavaScript files present in a folder called JS into a folder called JSM.

To be clear, I have two files inside my JS folder called test1.js and test2.js, and I want to run uglify_ against that folder and generate files 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.

Peter Mortensen · Accepted Answer · 2025-05-15 17:20:17Z

95

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:

Install Node.js
Install Grunt CLI (just enter this in console/terminal):
```
npm install -g grunt-cli
```

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

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

Now create a simple gruntfile.js file in the root of your project (it's a kind of configuration 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' ]);
};

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, and Stylus), JSHint, etc.

edited May 15 at 17:20

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 9, 2013 at 10:33

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

OussamaLord Over a year ago

Hi, thanks for you help but I do not see how this will work or solve my issue, I did all the steps and I get this :Running "watch" task waiting... ,I had to modify the code in "gruntfile.js" you have some errors in your code. I just want something to run at on time that can do what I want (as described above), thanks

Dziad Borowy Over a year ago

Hi. Sorry for errors (lots of copy&paste). If you can see the "Running watch task..." that's great! just save your js file and grunt should build that. Or just use grunt command to build files once.

OussamaLord Over a year ago

Hi, sorry this is the new message I get, nothing is created in my jsm folder:

C:\npm>grunt --force Running "uglify:file1" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Running "uglify:my_plugins" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Done, but with warnings

Dziad Borowy Over a year ago

you can do better - with masks, you can uglify all files into one: uglify: { tests: { src: [ 'js/*.js' ], dest: 'jsm/tests.min.js' } },

Dziad Borowy Over a year ago

You can mark my answer as "answer" (to close the topic) and click the up arrow next to it :-) And I'm happy to help!

|

Peter Mortensen · Accepted Answer · 2025-05-15 16:21:23Z

24

If you're on Linux or Mac and have access to Bash, you can use UglifyJS on multiple JavaScript files like so:

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

edited May 15 at 16:21

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 4, 2014 at 18:48

Calpau

92910 silver badges22 bronze badges

2 Comments

Costa Michailidis Over a year ago

How would you recursively go through a scripts folder? I have a javascripts folder, with directories inside of it like polyfills and libraries. Is there a way to run the for loop only recursively through the nested directories?

mbnoimi Over a year ago

My solution run over any path recursively and uses terser as a replacement to uglifyjs because it doesn't support ES6+ stackoverflow.com/a/65232798/2015609

Peter Butkovic · Accepted Answer · 2016-12-30 22:55:13Z

18

npm-only way:

run:
```
npm install uglifyjs-folder --save-dev
```
and afterwards add to your package.json something like:
```
"uglifyjs": "uglifyjs-folder js -eo jsm"
```
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:

run:

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

and afterwards add to your package.json something like:

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

then run:
```
 npm run uglifyjs
```

answered Dec 30, 2016 at 22:55

Peter Butkovic

12.3k10 gold badges62 silver badges85 bronze badges

1 Comment

Gnesh Jul 30 at 10:52

Any idea how to achieve this: source/js/desktop/file1.js, file2.js... source/js/mobile/file1.js, file2.js... and to output: output/js/desktop.min.js output/js/mobile.min.js So, files in source directories should be compiled in one file with directory name.

Peter Mortensen · Accepted Answer · 2025-05-15 16:23:08Z

8

Further to Calpau's 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'

edited May 15 at 16:23

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 25, 2014 at 11:53

mmorrey

1031 silver badge5 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-05-15 16:48:49Z

4

UglifyJS does not support ES6 (or later), so I suggest to use terser (to install it, run npm install terser -g). Below is 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

edited May 15 at 16:48

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 10, 2020 at 10:30

mbnoimi

4484 silver badges22 bronze badges

1 Comment

I Stand With Israel Over a year ago

This is great! I ran into an issue, however, where the function names are not being mangled. I tried adding --module to the the CLI command to tell it I'm using ES6 modules, which should also automatically enable --keep-fnames=false, but it still doesn't work for me. Adding --keep-fnames=false causes an error

Kop4lyf · Accepted Answer · 2014-10-31 08:53:25Z

3

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'
            }]
        }
    }

answered Oct 31, 2014 at 8:53

Kop4lyf

4,6001 gold badge27 silver badges31 bronze badges

2 Comments

Corey Alix Over a year ago

This does not handle sub-folders? What should the "dest" be so that "app/app.js" and "mod/mod1.js" end up in "dest/app/app.min.js" and "dest/mod/mod1.min.js"?

soulmachine Over a year ago

same issue, this skips sub folders.

Peter Mortensen · Accepted Answer · 2025-05-15 16:45:55Z

0

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

edited May 15 at 16:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 19, 2016 at 15:41

Fabio

113 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-05-15 16:46:36Z

0

You can use this npm module package:

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

// Making the 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

edited May 15 at 16:46

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 15, 2020 at 6:17

yeongmin

15 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-05-15 16:53:31Z

0

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

edited May 15 at 16:53

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 5, 2023 at 12:04

Anas Ghanem

1277 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2025-05-15 17:04:03Z

Using a 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 subdirectories (note: it doesn't have any depth limit, so how much deeply nested subdirectories 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 file inside your current directory, as well as in all the subdirectories.

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

Collectives™ on Stack Overflow

How can I minify multiple JavaScript files in a folder with UglifyJS?

10 Answers 10

14 Comments

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

14 Comments

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related