Juicy lil' bytes

Compress an Entire Directory of CSS Files

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.

Dependencies

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 yuicompressor-2.4.8.jar file.

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
#!/bin/sh
# Scriptacular - yuicss.sh
# CSS file compression with yuicompressor
# Copyright 2013 Christopher Simpkins
# MIT License

# Modify YUI_PATH below with the path to your yuicompressor jar file
YUI_PATH="path/to/yuicompressor-2.4.8.jar"

if [ $# -eq 0 ]; then
  echo "Please include the file path(s) for the file(s) that you would like to compress." 1>&2
  exit 1
fi

for file in "$@";
do
if [ -f "$file" ]; then
      java -jar "$YUI_PATH" -o "${file%%.*}-min.css" "$file"
      if (( $? )); then
          echo "$file was not able to be minified"
          exit 1
      else
          echo "$file was minified to ${file%%.*}-min.css"
      fi
  else
      echo "Unable to find the style sheet file '$file'."
fi
done;
exit 0

Change the 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 .bash_profile or .bashrc) and enter the following line to create the alias minicss:

1
alias minicss="~/scripts/yuicss.sh"

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:

1
source .bash_profile

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:

1
minicss *.css

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:

1
rm *-min.css

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.