Clean-css is a fast and efficient Node.js library for minifying CSS files.
According to tests it is one of the best available.
Node.js 0.8.0+ (tested on CentOS, Ubuntu, OS X 10.6+, and Windows 7+)
npm install clean-css
npm update clean-css
or point package.json
to version 2.x. That’s it!
Update clean-css
as for CLI above.
Then change your JavaScript code from:
var minimized = CleanCSS.process(source, options);
into
var minimized = new CleanCSS(options).minify(source);
And you are done.
Clean-css accepts the following command line arguments (please make sure
you use <source-file>
as the very last argument to avoid potential issues):
cleancss [options] source-file, [source-file, ...]
-h, --help Output usage information
-v, --version Output the version number
-b, --keep-line-breaks Keep line breaks
--s0 Remove all special comments, i.e. /*! comment */
--s1 Remove all special comments but the first one
-r, --root [root-path] A root path to which resolve absolute @import rules
and rebase relative URLs
-o, --output [output-file] Use [output-file] as output instead of STDOUT
-s, --skip-import Disable @import processing
--skip-rebase Disable URLs rebasing
--skip-advanced Disable advanced optimizations - selector & property merging,
reduction, etc.
--skip-aggressive-merging Disable properties merging based on their order
--rounding-precision [value] Rounding precision, defaults to 2
-c, --compatibility [ie7|ie8] Force compatibility mode
-d, --debug Shows debug information (minification time & compression efficiency)
To minify a public.css file into public-min.css do:
cleancss -o public-min.css public.css
To minify the same public.css into the standard output skip the -o
parameter:
cleancss public.css
More likely you would like to concatenate a couple of files. If you are on a Unix-like system:
cat one.css two.css three.css | cleancss -o merged-and-minified.css
On Windows:
type one.css two.css three.css | cleancss -o merged-and-minified.css
Or even gzip the result at once:
cat one.css two.css three.css | cleancss | gzip -9 -c > merged-minified-and-gzipped.css.gz
var CleanCSS = require('clean-css');
var source = 'a{font-weight:bold;}';
var minimized = new CleanCSS().minify(source);
CleanCSS constructor accepts a hash as a parameter, i.e.,
new CleanCSS(options).minify(source)
with the following options available:
keepSpecialComments
- *
for keeping all (default), 1
for keeping first one only, 0
for removing allkeepBreaks
- whether to keep line breaks (default is false)benchmark
- turns on benchmarking mode measuring time spent on cleaning up
(run npm run bench
to see example)root
- path to resolve absolute @import
rules and rebase relative URLsrelativeTo
- path with which to resolve relative @import
rules and URLsprocessImport
- whether to process @import
rulesnoRebase
- whether to skip URLs rebasingnoAdvanced
- set to true to disable advanced optimizations - selector & property merging, reduction, etc.compatibility
- Force compatibility mode to ie7
or ie8
. Defaults to not set.debug
- set to true to get minification statistics under stats
property (see test/custom-test.js
for examples)For a tutorial how to use Grunt, Gulp, Broccoli or Brunch with clean-css, read Addy Osmani’s “Spring cleaning unused CSS”.
First clone the source, then run:
npm run bench
for clean-css benchmarks (see test/bench.js for details)npm run check
to check JS sources with JSHintnpm test
for the test suitenpm test
).npm run check
) and follow all other ones too.If you wonder where to add tests, go for:
test/unit-test.js
if it’s a simple scenariotest/data/...
if it’s a complex scenario (just add two files, input and expected output)test/binary-test.js
if it’s related to bin/cleancss
binarytest/module-test.js
if it’s related to importing clean-css
as a moduletest/protocol-imports-test.js
if it fixes anything related to protocol @import
sUse the /*!
notation instead of the standard one /*
:
/*!
Important comments included in minified output.
*/
Clean-css will handle it automatically for you (since version 1.1) in the following cases:
-o
/--output
to rebase URLs as relative to the output file.-r
/--root
to rebase URLs as absolute from the given root path.-r
/--root
takes precendence.relativeTo
and target
options for relative rebase (same as 1 in CLI).relativeTo
and root
options for absolute rebase (same as 2 in CLI).root
takes precendence over target
as in CLI.@import
processing, namely introducing the --skip-import
/
processImport
options.@import
processing inside comments.sys
package.Clean-css is released under the MIT License.