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