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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

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!