How to Minify your CSS and JS files superfast

What is code minification?

Minification, in computer programming languages and especially JavaScript (and CSS and HTML), is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Why?

It saves space which means your web pages will run faster.

How?

A great solution is to YUI Compressor

Note: When I first tried to get this to work I ran into lots of problems. I finally read the readme file inside the YUI package and got myself sorted. The problem is you need to have java added to your OS path. If you are using a Mac, it should be installed by default so you should have no problems. Windows users on the other hand, you need to add it to your path. I have created a tutorial on how to do this. Read it here. Once you add java to your path, you can get YUI Compressor to work all it’s time saving magic.

Use ST2 and make your life a whole lot easier

An even better way if you are using Sublime Text 2. Add the YUI package, open a .js or .css file and press f7. Not only will you minimize your code but it will put the minimized code in a new file with the extension of ‘.js.min‘ or ‘.min.css‘ added to the end of the current file name. It really is magical.

Additional Reading

Here is the long way of adding YUI Compressor to Sublime Text 2 (just in case you are curious).

One Reply to “How to Minify your CSS and JS files superfast”

Leave a Reply

Your email address will not be published. Required fields are marked *