How do you automagically minify your JS and CSS on OS X or in Webstorm?

Question

I use two different IDE's based on what I'm doing. My primary IDE is Visual Studio, whereby I use Chirpy to mash and minify my code. It works flawlessly and I love it. Problem is that when I'm not on my Windows box, I don't have access to it.

When not using Visual Studio, I'm usually writing Javascript apps in Webstorm on my Macbook Pro. Here in lies the problem. I haven't found a Webstorm plugin or any other app that I can configure to watch my scripts and mash/minify them.

How do you Mac users mash/minify your JS and CSS at design time with minimal effort?

Answer 1

For those who have now updated to WebStorm 6, this functionality is in-built. Simply go to File (or whatever the Mac equivalent is) -> Settings -> File Watchers and define a file watcher for the type of file you need to watch.

The relevant help documentation is here - http://www.jetbrains.com/webstorm/webhelp/using-file-watchers.html

Answer 2

You could use YUI Compressor without Command Line with these little Apps:

• http://www.webmaster-source.com/minimus/ – free
• http://www.matmartinez.net/delivery/ – free

Answer 3

I'm neither a Mac nor Webstorm user, but this might still be relevant.

For javascript I use the closure compiler as part of an upload script to minify. It doesn't monitor the files, it runs when I run the upload (a bash file).

If you wanted to keep it all in the IDE, it looks like Webstorm has an Ant plugin http://plugins.intellij.net/plugin/?webide&id=4526 that you could use to execute the closure compiler.

If you can find a command line css minifier then you could put that in the Ant script as well.

Answer 4

I use lessc and uglifyjs to concatenate and minify my css and js files. Here's a makefile from Twitter Bootstrap that I used a modified version of:

https://github.com/twitter/bootstrap/blob/master/Makefile

It's simple since all I do is type make in the command line whenever I want to compile.