PhpStorm minify multiple JavaScript files in 1

Question

I wanted to minify my JavaScript files using PhpStorm's file watcher but I can't get it working the way I would like it to.

I have installed uglify-js. In the file watcher I tried the following:

Arguments: $FileName$ -o $FileDir$.min.js --style compressed
Output paths to refresh: $FileDir$.min.js

The problem is that there is just 1 file being minified each time not all in one.

The other problem is that I would like to output a sourcemap but I don't know how to do this nor where to put it (arguments or output paths).

I hope someone could help me with these settings.

Answer 1

Few notes on File Watchers:

• File watchers were designed primarily to perform some external actions on file on save.
• File watcher gets called for each modified file.
• If you want to process multiple files in one go (for example: merge 2+ files into 1) using File Watcher then you need to hard code all participating files (as opposed to using current file macro $FileName$ for that), unless, of course, uglify supports file masks (e.g. /path/to/folder/*.js).
• If you modify 2 files from the target list then File Watcher will be called for each of them so even with hard coded file names it will be performed twice (same job done twice).

Considering the above I suggest using Grunt or Gulp task for that instead -- they're more suitable for such requirements.

P.S. If you wish you could actually use such grunt/gulp task inside File Watcher (same as calling it in terminal/console manually) but because of point #3 above the better solution would be using Grunt's/Gulp's watch module/functionality if you need automatic execution of task.