Jun 14

Bundle and minify multiple CSS (or JS) "assets" into one file

Category: Linux,webserver   — Published by goeszen on June 14, 2016 at 7:57 pm

It's common to compress/optimize/bundle multiple CSS or JavaScript files into one file, so you minimize HTTP requests when a client prepares a website. Similar to what file asset tools like File::Asset do.

Here's how to do it with YUICompressor:

$ cat style.css media.css | java -jar ~/yuicompressor-2.4.8.jar --type css > bundle.min.css

What it does: cat reads two files, the website's style CSS and media-queries CSS (which reside in a separate file here) and pipes it to yuicompressor, which is called via java -jar. With pipe input we have to explicitly tell yuicompressor about the incoming type of data (as per docs). The output is written to bundle.min.css via >.

Note that simply enumerating multiple files for yuicompressor does not work! Something like $ java -jar ~/yuicompressor-2.4.8.jar file1.js file2.js file3.js > bundle.min.js will result in only the last file being processed!

Leave a Reply