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

Last updated on August 6, 2020 by Dan Nanni

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

Support Xmodulo

This website is made possible by minimal ads and your gracious donation via PayPal or credit card

Please note that this article is published by Xmodulo.com under a Creative Commons Attribution-ShareAlike 3.0 Unported License. If you would like to use the whole or any part of this article, you need to cite this web page at Xmodulo.com as the original source.