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

gulp plugin to minify CSS, using clean-css

Regarding Issues

This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself.

Install

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

API

cleanCSS([options], [callback])

options

See the CleanCSS options.

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

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

callback

Useful for returning details from the underlying minify() call. An example use case could include logging stats of the minified file. In addition to the default object, gulp-clean-css provides the file name and path for further analysis.

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

gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest('dist'));
});

Source Maps can be generated by using gulp-sourcemaps.

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

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

License

MIT © 2019 scniro