Reputation: 1095

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

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.

Upvotes: 51

Answers (10)

Doobied

Reputation: 9

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.

Upvotes: 0

Anas Ghanem

Reputation: 127

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
}

Upvotes: 0

mbnoimi

Reputation: 440

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

Upvotes: 4

yeongmin

Reputation: 1

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

Upvotes: 0

Peter Butkovic

Reputation: 12189

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

Upvotes: 18

Fabio

Reputation: 11

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

Upvotes: 0

Kop4lyf

Reputation: 4590

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

Upvotes: 3

Calpau

Reputation: 919

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

Upvotes: 24

mmorrey

Reputation: 103

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'

Upvotes: 8

Dziad Borowy

Reputation: 12589

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 NodeJS
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 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' ]);


};

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.

Upvotes: 95

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

Answers (10)

Related Questions