jekyll-yui-css

Takes (potentially) multiple CSS files from a directory, compresses them with YUI Compressor, and outputs a single CSS file each time your site is generated with Jekyll.

Installation

Dependencies

jekyll gem install jekyll
ruby-yui-compressor gem install yui-compressor

Note: YUI Compressor requires Java. On Ubuntu, you can install this with sudo apt-get install openjdk-7-jre-headless.

Instructions

Copy yui_css.rb to the _plugins directory of your Jekyll project.
Follow configuration instructions below.
Run jekyll to generate your site. If everything worked, you should see a line in the terminal like this:

Compressing CSS with YUI... Done! Outputted to: ./_site/assets/style.css

Configuration

jekyll-yui-css accepts two configuration parameters in the standard Jekyll _config.yml file:

css_source_dir is the path to the directory in which the original CSS files are contained, relative to source. Defaults to css.
css_output_file is the path to the file in which to save the compressed CSS, relative to destination. Should have a leading slash and end in .css. Defaults to /css/style.css.

You must list your CSS files in Jekyll's exclude configuration parameter. If you don't, if the source and output filenames are the same, Jekyll will not save the compressed file or, if the filenames are different, Jekyll will make the original, uncompressed files available in the destination directory (in addition to the compressed one).

(Note: You may specify the directory in which the CSS files are in for the exclude setting in _config.yml, but you should only do this if the directory only contains CSS, otherwise the other files will not be carried over to the destination.)

As an example, consider this project structure:

_layouts/
_plugins/
  yui_css.rb
_posts/
_site/
assets/
  footer.png
  header.png
  special.css
  style.css
_config.yml
index.html

and this _config.yml:

# ...
source:      .
exclude:     special.css, style.css
destination: ./_site
plugins:     ./_plugins

css_source_dir:  assets
css_output_file: /assets/style.css
# ...

with a layout including:

<link href="/assets/style.css" rel="stylesheet" type="text/css">

In this case, assets/special.css and assets/style.css would be minified, combined, and outputted to _site/assets/style.css, which would then be included in the layout file via the <link> tag.

If you have any questions/problems, please let me know!

Notes

I wrote this because I wasn't satisfied with the approached used by jekyll-cssminify. If you're wondering what's different, jekyll-yui-css: