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.
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-compressor
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");
done
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
. 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 .
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 );
done
YUI Compressor on Mac OS X
Mac OS X users can use brew to install YUI Compressor:
brew install yuicompressor
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.css
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 %I
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 %I
All you need to do afterwards is uploading your minified/compressed files to your website.