gulp-clean-css

What is gulp-clean-css?

gulp-clean-css is a Gulp plugin for minifying CSS files using the clean-css library. It helps in reducing the size of CSS files by removing unnecessary whitespace, comments, and other redundant elements, which can improve the performance of web applications.

What are gulp-clean-css's main functionalities?

Basic Minification

This feature allows you to perform basic minification of CSS files. The code sample demonstrates how to set up a Gulp task to minify CSS files from the 'src' directory and output the minified files to the 'dist' directory.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('src/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist'));
});

Advanced Minification Options

This feature allows you to use advanced minification options provided by clean-css. The code sample shows how to set the 'level' option to 2 for more aggressive optimizations.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css-advanced', () => {
  return gulp.src('src/*.css')
    .pipe(cleanCSS({ level: 2 }))
    .pipe(gulp.dest('dist'));
});

Source Maps

This feature allows you to generate source maps for the minified CSS files. The code sample demonstrates how to initialize and write source maps using the 'gulp-sourcemaps' plugin in conjunction with 'gulp-clean-css'.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('minify-css-sourcemaps', () => {
  return gulp.src('src/*.css')
    .pipe(sourcemaps.init())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'));
});

Other packages similar to gulp-clean-css

gulp-csso

gulp-csso is another Gulp plugin for minifying CSS files, using the CSSO library. It offers similar functionality to gulp-clean-css but uses a different underlying library for minification. CSSO is known for its aggressive optimizations and may produce smaller file sizes in some cases.

gulp-uglifycss

gulp-uglifycss is a Gulp plugin for minifying CSS files using the UglifyCSS library. It provides basic minification capabilities similar to gulp-clean-css but may not offer as many advanced options or optimizations.

gulp-postcss

gulp-postcss is a Gulp plugin that allows you to use PostCSS plugins to process CSS files. While not a minifier itself, it can be used with plugins like cssnano to achieve minification. This makes it a more flexible but potentially more complex solution compared to gulp-clean-css.

README

gulp-clean-css

Minify files with CleanCSS

DEPRECATED

This package is marked as deprecated. Please use jonathanepollack/gulp-minify-css instead.

Installation

npm install --save-dev gulp-clean-css

Usage

var minify = require('gulp-clean-css');

gulp.task('compress', function() {
  return gulp.src('assets/stylesheets/*.css')
    .pipe(minify())
    .pipe(gulp.dest('dist'))
});

Credits

This package is heavily inspired (actually it's a clone..) by terinjokes/gulp-uglify.

Also take a look at jonathanepollack/gulp-minify-css. The only reason I made this clone is the fact that Node was throwing some low-level errors..