In other words, in our HTML page, instead of ten external scripts and css files:
we want to include just two:
In order to follow this tutorial you will need to have a Java Runtime Environment (JRE) installed, since the YUI Compressor is written in Java. It's also useful to have Bash for some scripting that can make our life a little bit easier.
In Ubuntu, you can install a JRE with the following command:
sudo apt-get install default-jre
To get started you first need to download the YUI Compressor. This tutorial refers to the latest available version, 2.4.2. After you download it, you must unzip it to the directory of your choice. I use /usr/local for my destination (thus the use of sudo), but you can use any path you want; just update the scripts accordingly. In a terminal, type:
sudo unzip ~/Downloads/yuicompressor-2.4.2.zip -d /usr/local sudo ln -s /usr/local/yuicompressor-2.4.2 /usr/local/yuicompressor
We can now invoke the compressor:
java -jar /usr/local/yuicompressor/build/yuicompressor-*.jar
If everything works well you should see a list with the available parameters of the tool.
We'll just wrap the YUI Compressor in a script so that we can compress and concatenate multiple files at the same time, without having to worry about running a correct Java command. It will also save us some typing later. You can download the script and save it as /usr/local/bin/yuicompress, or you can create it by hand. First open a text editor:
sudo pico /usr/local/bin/yuicompress
then copy and paste the code below, and finally save the file using CTRL-X.
It might be a good idea to also make this script executable. In a terminal, type:
sudo chmod +x /usr/local/bin/yuicompress
# cd /path/to/your/site/code yuicompress -o css/all-css-min.css css/jquery-fancybox.css css/jquery-ui.css css/site.css yuicompress -o js/all-js-min.css js/jquery-1.4.4.js js/jquery.easing-1.3.pack.js \ js/jquery.mousewheel-3.0.4.pack.js js/jquery.fancybox-1.3.4.pack.js \ js/jquery.ui.core.min.js js/jquery.ui.widget.min.js js/jquery.ui.accordion.min.js
If you enjoyed this article, you might also be interested in:
Subscribe to our blog to follow our tutorials and news updates.