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
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

  • By
    AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...

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!