Minify CSS with Jekyll

I was trying to find a way to minfiy CSS for use with Jekyll, in some sort of automated fashion.

tl;dr

I created a css minify plugin for Jekyll: https://github.com/donaldducky/jekyll-cssminify

Neat Trick

The best I could find was to aggregate CSS, taking advantage of Jekyll's parsing of the YAML Front Matter section at the top of the file.

{% raw %}
/* all.css */
---
---
{% include style.css %}
{% include syntax.css %}
{% endraw %}

It's a nice solution for putting the files together, but I wanted to minify them to squeeze every byte out.

I searched the web but couldn't find a way to do it and decided to dive into creating a Jekyll plugin. More specifically, a "Generator" type to create the minified css file.

I figured, if I'm using Jekyll, might as well learn these things now!

CssMinify Plugin

Minifies CSS using the awesome juicer gem, which in turns makes use of YUI Compressor.

Here's a brief summary.

# install dependencies
gem install juicer
juicer install yui_compressor
juicer install jslint

# The rest of the instructions assumes you're in your root site directory
# put CssMinify.rb into your _plugins dir, or create it if it doesn't exist
mkdir _plugins
cd _plugins

# if you don't have wget, you can use curl -OL https://raw.github.com/donaldducky/jekyll-cssminify/master/CssMinify.rb
wget https://raw.github.com/donaldducky/jekyll-cssminify/master/CssMinify.rb

# generate your site
jekyll

What this does, is takes your css/*.css files and runs them through juicer and creates a file in your destination directory at _site/css/site.min.css.

It is equivalent to doing it yourself on the command line:

juicer -f css/style.css css/syntax.css -o _site/css/site.min.css

For more information, go visit the project on GitHub: https://github.com/donaldducky/jekyll-cssminify

I put it together rather quickly and my Ruby code probably looks like a hack but it "works on my machine"!

If you have any questions or comments, please feel free to open a issue on GitHub or leave a comment below!