If you are using PhpStorm then css and javascript minification is a set it and forget it process that requires no maintenance after setup. As a programmer it doesn’t get any better than that, so I felt very silly for not doing a good job of it over the years when I figured out this trick. It took a minute to figure out as i’m using Mac OSX Maverick, and all of the articles on it were for Windows. So, if you’re stuck and on windows you should be good to find specifics with a quick google. Alright, lets get going.
First, this was also my introduction to Node.js, but not to worry if it is yours too, we will only be using it as a simply command line utility. Head over to http://nodejs.org/ and click install to download, and then run the pkg, defaults will work. Then go into PhpStorm and install the node.js plugin to finish that integration. A little note, /usr/local/lib/node_modules is the important directory and it should hold by default npm ( Node Package Manager ). And by default everything should be symlinked so the npm command will work anywhere.
Download:
Install:
If properly installed, you will now be able to type npm into the command line and get information on how to use it.
Install PhpStorm plugin:
Now we need to install the libraries that actually do the minification processes. YUI Compressor does the standard minification. Code Compiler will compile your code and then rebuild parts where it can safely improve efficiencies. We will use the Node Package Manager to install those two packages.
While the node.js plugin seems to come with a pretty GUI for the NPM, it just made my computers fan whirr while for several minutes while trying to get a list of available packages. It’s faster to just open up command line and install both packages anyways.
sudo npm install yuicompressor
sudo npm install closure-compiler
And possibly the whole reason you read this article, they are now installed at:
/usr/local/lib/node_modules/yuicompressor/build/yuicompressor-2.4.8.jar
/usr/local/lib/node_modules/closure-compiler/lib/vendor/compiler.jar
If you wanted you could now manually minify files, but thankfully PhpStorm provides a way to let it take care of all the work called file watchers. They check if a file meets a criteria every time you save and if so executes a command, such as minify. PhpStorm even comes with prebuilt templates for these that make it super easy to setup. You’ll have to set the program path to the correct executable path even with the template though. Add Yui Compressor CS, Yui Compressor JS, and Code Compiler watchers with their respective templates:.
Find matching file watcher template:
Add YUI Compressor CSS:
Add YUI Compressor JS:
Add Code Compiler:
Now it should work:
Go to a javascript file add a space, click away and it should generate a .min.js file in the same location as your current. A little tip, don’t then access the min.js file and make a change as you’ll get min.min.js files… and so forth. Just continue to edit your human readable js file like normal and it will keep the min.js up to date. Phpstorm does a nice job of hiding the min file under the main one in it’s structure tree also, so no extra clutter.
File Structure Example:
You now you have seamless minification for the project you setup the watcher for. You’ll have to set them up for each project you want them on, but if you select the template it will have everything filled out, including the path.