Have an entire directory of CSS files that you need to compress after your most recent set of changes? Check out this YUI compressor + shell script combination.
What it Does
The YUI Compressor decreases the size of your CSS file with a variety of optimization techniques. The entire list of modifications is available in the YUI Compressor documentation.
The YUI Compressor is a Java .jar file and Java version 1.4+ is necessary to run it on your system.
Download YUI Compressor
Release 2.4.8 is available on this GitHub repository. Download and decompress the
Set Up Your Shell Script
Either create a shell script file with the following shell script or grab it from my GitHub repository:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
YUI_PATH variable to the actual path to your
yuicompressor-2.4.8.jar file. Save the file as
yuicss.sh and use the command
chmod 744 yuicss.sh to make it executable.
Make a Bash Alias
Create an alias for your shell script so that you don’t have to type the full path to the script each time that you use it. For example, if you saved the
yuicss.sh file on the path
~/scripts/yuicss.sh, then open your bash startup file (either
.bashrc) and enter the following line to create the alias minicss:
To use this alias in your current shell process, use the source command on the bash startup file. Assuming that you placed this in the
.bash_profile file and your working directory contains that file, your command is:
It is not necessary to run the source command again when you close and then reopen your terminal.
Compress an Entire Directory of CSS Files
Now that you have an alias for your shell script, you can use it to compress as many CSS files contained in a single directory that you’d like. It’s all done with a simple command statement.
Navigate to the directory that contains your CSS files and type the following:
This command creates a new, minified version of each CSS file in the directory with a -min suffix added to the filename (i.e. [original filename]-min.css). The original files are not modified.
Remove the Minified CSS Files
If you ever need to remove all of the minified versions of the CSS files that the script creates, navigate to the directory and run the following command:
Note: This command matches all files with the pattern
<file>-min.css. Make sure that there are no minified versions of external CSS files that would match this rule in the working directory (e.g. bootstrap-min.css) because they will be deleted as well.