Node.js CSS Compressor: clean-css

By  on  

One of my recent finds on the goldmine that is GitHub is GoalSmasher's account. The GoalSmashers team has created three notable (or at least useful to me) utilities you all should know about:

  • enhance-css: embeds imagery into stylesheets via Base64 encoding
  • clean-css: minifies and concatenates CSS files
  • assets-packager: builds, minifies, and bundles JavaScript and CSS files in the same command

In this post, I'd like to take a few moments to look at clean-css, a CSS dead simple minification package. The clean-css utility does just what you would expect from a CSS minifier: strips unnecessary whitespace, removes comments, deletes the last semicolon of every selector, and more!

Installing clean-css

clean-css can be installed via NPM, which is super convenient:

npm install clean-css

You can also simply check out the source from GitHub.

Using clean-css from Shell

Using clean-css from the shell is simple:

cleancss -o style.min.css style.css

You can even use basic shell commands to pass concatenated input in:

cat theme.css feature1.css feature2.css feature3.css | cleancss -o features.css

Or chain gzipping as well:

cat theme.css feature1.css | cleancss | gzip -9 -c > feature1.css.gz

Compressing via shell commands is super useful for quick manual minfication or intense build processes.

Using clean-css via NodeJS Apps

clean-css can also be used from within your JavaScript code:

# Get the clean-css package
var cleanCSS = require('clean-css');

# Read in the source of a file or use hard-coded CSS...
var source = "body { color: red; font-weight: bold; }";

# Minify!
var minifiedCSS = cleanCSS.process(source);

A huge kudos goes to the GoalSmashers team for their useful utilities, and for open-sourcing them for all of us to use! I have a feeling some of you will be tweaking (or creating) your build process based on their work. Happy optimizing!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • By
    Flexbox Equal Height Columns

    Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but...

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

Discussion

  1. Sergey

    Hey Dave, how do you use gzipped files? :)
    Is that for deployment?

  2. In my case I use -g option to make it globally available and call basic shell command

    npm install clean-css -g

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!