Minify and Compress CSS & Javascript Files At a Linux/Unix Shell Prompt

How do I minify and compress CSS & JS files on Linux or Unix-like system using shell prompt on my server? How can I minify JavaScripts and stylesheets at shell prompt so they can download faster over the Internet without using any online tools?

You need to use “YUI Compressor” tool. It is widely used for minifying JavaScripts and stylesheets. From the project page: [donotprint]
Tutorial details
DifficultyEasy (rss)
Root privilegesYes
RequirementsNone
Time5m
[/donotprint]

ADVERTISEMENTS

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal in those cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)

Step 1. Install JAVA on Linux or Unix system

You need JAVA to run yuicompressor. See how to install JAVA on Linux:

Once Java installed on the system, make sure you can see the JDK info with the following command:

whereis java
which java
java -version

Sample outputs:

Fig. 01: Make sure java is installed on a Linux/Unix based system

Fig. 01: Make sure java is installed on a Linux/Unix based system

Also, make sure you set correct path to JAVA_HOME in your shell startup file. For example:

export JAVA_HOME="/usr/lib/jvm/jre-1.7.0-openjdk.x86_64"

Step #2: Install yuicompressor on a Linux and Unix-like system

Type the following wget command to download the latest version of yuicompressor:
$ mkdir -p $HOME/yuicompressor
$ cd !!:$
$ wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

How do I run yuicompressor?

Type the following command to run the yuicompressor directly:
$ java -jar yuicompressor-2.4.8.jar

Sample outputs:

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 <js|css>           Specifies the type of the input file
  --charset <charset>       Read the input file using <charset>
  --line-break <column>     Insert a line break after the specified column number
  -v, --verbose             Display informational messages and warnings
  -o <file>                 Place the output into <file>. 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'.

Example: Compress and Minify a CSS file

In this example, I am going to to compress style.css code file to reduce file size and make site load faster. My current file size:
$ ls -l style.css
Sample outputs:

-rw-r--r--. 1 vivek vivek 46909 Jan 11 21:33 style.css

Next, call the yuicompressor directly with a command:
$ java -jar yuicompressor-2.4.8.jar --type css style.css > mini_style.css
OR
$ java -jar yuicompressor-2.4.8.jar --type css -o mini_style.css style.css
Again, list minified/compressed css file and note down the file size with the help of ls command:
$ ls -l mini_style.css
Sample outputs:

-rw-r--r--. 1 vivek vivek 36576 Jan 11 21:33 mini_style.css

Here is a bash for loop to compress multiple CSS files:

for i in ie.css style.css tutorial.css social.css
do  
  java -jar yuicompressor-2.4.8.jar --type css -o "mini_$i" "$i"
done

Example: Compress and Minify a Javascript file

The syntax is:
$ java -jar yuicompressor-2.4.8.jar --type js nixcraft.js > mini_nixcraft.js
OR
$ java -jar yuicompressor-2.4.8.jar --type js -o mini_nixcraft.js nixcraft.js
Here is a bash for loop to compress js files:

for i in nixcraft.js ads.js demo.js ui.js
do  
  java -jar yuicompressor-2.4.8.jar --type js -o "mini_$i" "$i"
done
References
🐧 Get the latest tutorials on SysAdmin, Linux/Unix, Open Source/DevOps topics:
CategoryList of Unix and Linux commands
File Managementcat
FirewallCentOS 8 OpenSUSE RHEL 8 Ubuntu 16.04 Ubuntu 18.04 Ubuntu 20.04
Network Utilitiesdig host ip nmap
OpenVPNCentOS 7 CentOS 8 Debian 10 Debian 8/9 Ubuntu 18.04 Ubuntu 20.04
Package Managerapk apt
Processes Managementbg chroot cron disown fg jobs killall kill pidof pstree pwdx time
Searchinggrep whereis which
User Informationgroups id lastcomm last lid/libuser-lid logname members users whoami who w
WireGuard VPNCentOS 8 Debian 10 Firewall Ubuntu 20.04

ADVERTISEMENTS
6 comments… add one
  • Aris S Ripandi Mar 10, 2014 @ 7:47

    thanks, this article help me

  • Riot77 Mar 10, 2014 @ 10:02

    Great. Also as much as I know, you can reduce javascript simply by removing all the spaces and linebreaks… you can do that simply using “sed” and save at least (depends of the code) half of the size.

  • lurvas777 Apr 4, 2014 @ 20:46

    should be “java -version” not “java -versio” (in first code block).
    Great article!

  • Amit Oct 15, 2014 @ 10:54

    For windows,how do I minify all the JS files within a folder and subfolders and output them to a single file say minify.js ?

    say java -jar yuicompressor-2.4.8.jar –type js D:\Shingo\webapp\js*.js > combined.js

  • Hesam Oct 17, 2015 @ 16:55

    Good tutorial, Thanks.

Leave a Reply

Your email address will not be published.

Use HTML <pre>...</pre>, <code>...</code> and <kbd>...</kbd> for code samples.