Minification or compression means removing all unnecessary characters, such as spaces, new lines, comments, without changing the functionality of the source code. During development and debugging, these characters make code easier to read. At the production stage, they only increase the size of code to be transferred.
To minify your code automatically, you need to install a minification tool and configure a File Watcher which will track changes to your files and run the minification tool.
To compress your code automatically, you need to install UglifyJS and configure a UglifyJS File Watcher which will track changes to your files and run the tool.
Before you start
Make sure you have Node.js on your computer.
Install and enable the File Watchers plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains Marketplace.
Install UglifyJS globally
In the embedded Terminal (Alt+F12) , type:
npm install --g uglify-js
Learn more from the UglifyJS official website.
Create an UglifyJS File Watcher
In the Settings dialog (Control+Alt+S), click File Watchers under Tools. The File Watchers page that opens shows the list of already configured File Watchers.
Click or press Alt+Insert and select the UglifyJS predefined template from the list.
The New Watcher dialog opens.
In the Program text box, specify the location of the UglifyJS executable file.
If you installed UglifyJS through the Node Package Manager, RubyMine locates the package itself and fills in the field automatically with the
uglifyjsalias. Otherwise, type the path manually or click and select the file location in the dialog that opens.
By default, the Scope field shows Project Files. To avoid minification of already minified files, configure a custom scope with the
file:*js&&!file:*.min.*pattern, as described in Define a new scope.
Then select the new scope from the Scopes list.
Accept the other default File Watcher settings or reconfigure them, if necessary, as described in File Watchers, and click OK. RubyMine brings you back to the File Watchers page where the new File Watcher is added to the list:
Make sure the Enabled checkbox is selected.
By default, the File Watcher will be available in the current project. To use it in other projects, select Global from the Level list.