How to compress and minify CSS and JavaScript from the command line

For web designers, publishers and developers, one cannot stress enough the importance of keeping web pages or web applications as lightweight as possible. There are various design strategies and client/server-side techniques that can be exploited to achieve this goal.

One relatively simple and straightforward technique is "code minification". This is the process of eliminating unnecessary characters (e.g., white space, new lines, comments, optional delimeters) from source code, thereby "compressing" the size of source code at the cost of human readability. CSS or JavaScript code is commonly minified to reduce the amount of user-transferred bytes from a server.

The most well-known tool to minify CSS and JavaScript is YUI Compressor, which is part of YUI (Yahoo! User Interface) JavaScript library written by Yahoo! developers. Common use cases of YUI Compressor are in conjunction with other build tools such as Apache Ant or Maven, where web applications are built automatically minified with the help of YUI Compressor.

YUI Compressor can also be used standalone to compress CSS/JavaScript files manually. In this tutorial, I will describe how to compress CSS or JavaScript from the command line on Linux by using YUI Compressor.

Install YUI Compressor on Linux

The YUI Compressor is written in Java, and its pre-built JAR file (as well as its source code) is available for download. Here we are going to use the JAR executable.

First, install Java run-time, which is required to run YUI Compressor.

Download and install YUI Compressor as follows.

$ sudo mkdir -p /usr/share/java
$ sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar -P /usr/share/java

Create a start-up script named yc, with the following content.

$ sudo vi /usr/bin/yc
#!/bin/sh

java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"
$ sudo chmod +x /usr/bin/yc

Now you can use yc command to launch YUI Compressor.

$ yc
YUICompressor Version: 2.4.8

Usage: java -jar yuicompressor-2.4.8.jar [options] [input file]

Global Options
  -V, --version             Print version information
  -h, --help                Displays this information
  --type            Specifies the type of the input file
  --charset        Read the input file using 
  --line-break      Insert a line break after the specified column number
  -v, --verbose             Display informational messages and warnings
  -o                  Place the output into . Defaults to stdout.
                            Multiple files can be processed using the following syntax:
                            java -jar yuicompressor.jar -o '.css$:-min.css' *.css
                            java -jar yuicompressor.jar -o '.js$:-min.js' *.js

JavaScript Options
  --nomunge                 Minify only, do not obfuscate
  --preserve-semi           Preserve all semicolons
  --disable-optimizations   Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

Compress CSS or JavaScript from the Command Line

To compress or minify a CSS file, use the following command:

$ yc default.css -o default-min.css

Check how much size is reduced before and after CSS compression:

$ wc default.css default-min.css
  756  1097 14007 default.css
    0   163  5745 default-min.css

In this example, the total byte count for the original CSS file is reduced from 14KB to 5.7KB after compression.

A compressed/minified CSS file looks like the following:

To compress or minify JavaScript, you can proceed similarly.

$ yc sample.js -o sample-min.js

Subscribe to Xmodulo

Do you want to receive Linux FAQs, detailed tutorials and tips published at Xmodulo? Enter your email address below, and we will deliver our Linux posts straight to your email box, for free. Delivery powered by Google Feedburner.

The following two tabs change content below.
Dan Nanni is the founder and also a regular contributor of Xmodulo.com. He is a Linux/FOSS enthusiast who loves to get his hands dirty with his Linux box. He likes to procrastinate when he is supposed to be busy and productive. When he is otherwise free, he likes to watch movies and shop for the coolest gadgets.

Leave a comment

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

Current ye@r *