ScaleScaleScaleScale

Tips / Nginx


How to Minify & Compress CSS and Javascript Files from the Linux Shell

When you think of web optimization, there are a lot of things to do. One of the most important is the minification of CSS, HTML and JavaScript files. There are lot of online tools to do this. There are even WordPress plugins like W3 Total Cache that can do it automatically. However, these online and automated processes often have bugs and don’t work as expected. For those cases, there is one really cool way to minify CSS and JavaScript files if you are familiar with the Linux command line.

Keeping your website files as lightweight as possible is a must for all web designers and developers. Today, you will learn how to minify and compress CSS and JavaScript code using the YUI Compressor. What is the YUI Compressor? It’s a minification and compressor tool that was originally developed by the Yahoo Performance Team. The good thing is that you can use it on your pages too. This tutorial explains how to compress CSS and JavaScript from the Linux command line.

Installing the YUI Compressor

The YUI Compressor is written in Java, so you will need to install Java on your server in order to use it.

For CentOS/RHEL and Fedora:

yum install java

For Ubuntu/Debian:

sudo apt-get install default-jre

Check to make sure it’s working:

java -version

Output Example:

[webtech@localhost ~]$ java -version
openjdk version "1.8.0_31"
OpenJDK Runtime Environment (build 1.8.0_31-b13)
OpenJDK 64-Bit Server VM (build 25.31-b07, mixed mode)

Download and install the YUI Compressor

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

Create a script named ‘yui’:

nano -w /usr/bin/yui

Paste these lines inside:

#!/bin/sh
java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"

Save it and give execution permissions:

chmod +x /usr/bin/yui

Now, you can use the ‘yui’ command to launch the YUI Compressor.

Check to make sure it’s working:

yui --version

Output:

[root@localhost java]# yui --version
2.4.8

How can you compress CSS or JavaScript files from the Linux Shell?

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

yui style.css -o style-minified.css

To compress or minify JavaScript, you can proceed in the same way:

yc library.js -o library-minified.js

At this point, you should be able to minify your CSS and JavaScript files within your own Linux box. Having your code minified is one of the best performance practices you can do for all of your websites. For CSS, JavaScript, and even for HTML code, it will reduce the bandwidth transfer and decrease the amount of time needed for the files to be served.

Have you tried the YUI Compressor? Or do you use other online tools to minify your code?

Popular search terms:

  • ubuntu tool to compress js
  • how compress css code in linux
  • https://www scalescale com/tips/nginx/minify-css-javascript/#
  • linux compress javascript
profile

Esteban Borges

Linux Geek, Webperf Addict, Nginx Fan. CTO @Infranetworking

  • Tony Franco

    Hello Esteban, Thanks by the article!
    How to make nginx serve the minified files? do you have suggestion to combine js and css?
    I´m learning…
    Thanks and Regards!