Minify JavaScript, CSS and compress images

Optimizing, minify and compressing JavaScript and CSS files, the easy and fast way? With YUI Compressor on the Windows-, Linux- and macOS command line of course! Compacting HTML, CSS, and JavaScript can speeds up your website because of smaller and faster downloads, parsing, and execution time.

Table of Contents show

Fire-and-forget JavaScript and CSS minification and compression on the Linux-, Mac OS X and Windows command-line interface, using YUI Compressor.

YUI Compressor to optimize and minify JavaScript and CSS the easy way

Google PageSpeed Insights recommends optimizing or compressing images such as PNGs, and to minify Javascript and CSS. Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation.

YUI Compressor on Linux

To compress CSS and JavaScript in the Bash shell, all we need to do is install YUI Compressor. You can then use YUI Compressor to compress CSS and JavaScript in Bash, neat! :-)

sudo apt-get install yui-compressorCode language: JavaScript (javascript)

and run the commands from within our static content directory:

find . -type f -name "*.js"
 | while read line; do (yui-compressor --type js "$line" -o "$line");
 done

find . -type f -name "*.css"
 | while read line; do (yui-compressor --type css "$line" -o "$line");
 doneCode language: JavaScript (javascript)

In stead of doing a find search and a while read line loop, using YUI Compressor you can minify CSS and minify JavaScript files easily in one directory too. The help for -o <file> states:

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

All our JavaScript and CSS files are minified and optimized.

Compress JavaScript in Bash on the fly with UglifyJS 2

UglifyJS 2 is another great tool to compress JavaScript files in Bash on the fly. Here is how to install UglifyJS 2, and how to use it. Install UglifyJS 2 from Git, the easiest way is to git clone UglifyJS:

git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2
npm link .Code language: PHP (php)

After UglifyJS 2 is installed, you can loop through it on the Bash shell, compressing all JavaScript files on the fly:

find . -type f -name "*.js"
 | while read line; do ( ~/dev/UglifyJS2/bin/uglifyjs "$line" -o "$line" --compress --mangle );
 doneCode language: JavaScript (javascript)

YUI Compressor on Mac OS X

Mac OS X users can use brew to install YUI Compressor:

brew install yuicompressor

Are you looking for rock solid, eco-friendly, .NET hosting? Look no further! UmbHost offers powerful hosting services for websites and businesses of all sizes, and is powered by 100% renewable energy!

YUI Compressor on Windows

Java is required to run YUI Compressor on Windows (as it is on Linux and Mac OS X too). Download and install Java first.

Download and unzip YUI Compressor
Using cmd.exe, use the following command to execute YUI Compressor:

java -jar yuicompressor-2.4.7.jar style.css -o style-min.cssCode language: PowerShell (powershell)

The yuicompressor-2.4.7.jar file is located in the build folder.

YUI Compressor on Windows 10, Windows 8.1, 8 and Windows 7 – compress and minify CSS and JavaScript on the fly

Let’s dive more into YUI Compressor on Windows:

Suppose my website dev content is located in E:\Data\Codebase\sites\saotn.org\www and I’ve placed YUI Compressor in C:\Temp.

The following command compresses, or minifies, all CSS stylesheet files recursively, from within my content directory:

FOR /F %I in ('dir /b/s *.css') DO @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar %I -o %ICode language: PowerShell (powershell)

The following command compresses, or minifies, all JavaScript files recursively, from within my content directory:

FOR /F %I in ('dir /b/s *.js') DO  @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar %I -o %ICode language: PowerShell (powershell)

All you need to do afterwards is uploading your minified/compressed files to your website.

Show Your Support

If you want to step in to help me cover the costs for running this website, that would be awesome. Just use this link to donate a cup of coffee ☕($10 USD or €10 EUR for example). And please share the love and help others make use of this website. Thank you very much! <3 ❤️

0 Shares