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