- Apr 4, 2016
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.
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:
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:
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.