Introduction to gulp-clean-css

gulp-clean-css is a gulp plugin that provides a simple and efficient way to minify CSS files. Minifying your CSS files can significantly reduce the size of your web pages, resulting in quicker load times and better performance. If you are a web developer looking to optimize your workflow, gulp-clean-css is an essential tool to have in your toolkit.

Installation

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

Basic Usage

Below is a basic example of how to use gulp-clean-css in your gulpfile.js to minify your CSS files:

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

    function minifyCSS() {
      return gulp.src('src/css/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
    }

    exports.default = minifyCSS;
  

API Examples

Using Options to Print CSS Minification Stats

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

    function minifyCSS() {
      return gulp.src('src/css/*.css')
        .pipe(cleanCSS({ debug: true }, (details) => {
          console.log(\`${details.name}: Original size: ${details.stats.originalSize}\`);
          console.log(\`${details.name}: Minified size: ${details.stats.minifiedSize}\`);
        }))
        .pipe(gulp.dest('dist/css'));
    }

    exports.default = minifyCSS;
  

Enabling Advanced Optimization for Better Compression

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

    function minifyCSS() {
      return gulp.src('src/css/*.css')
        .pipe(cleanCSS({ level: 2 }))
        .pipe(gulp.dest('dist/css'));
    }

    exports.default = minifyCSS;
  

Combining `gulp-clean-css` with Other Gulp Plugins

You can combine `gulp-clean-css` with other gulp plugins to create a more robust CSS processing pipeline. Here’s an example that combines it with `gulp-sass` for SCSS compilation and `gulp-autoprefixer` for adding vendor prefixes:

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

    function styles() {
      return gulp.src('src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
    }

    exports.default = styles;
  

Example App Using gulp-clean-css

In this example, we will create a simple web app that uses gulp-clean-css to minify our CSS files:

  
    // gulpfile.js
    const gulp = require('gulp');
    const sass = require('gulp-sass')(require('sass'));
    const autoprefixer = require('gulp-autoprefixer');
    const cleanCSS = require('gulp-clean-css');

    function styles() {
      return gulp.src('src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
    }

    function watch() {
      gulp.watch('src/scss/*.scss', styles);
    }

    exports.default = gulp.series(styles, watch);

    // HTML structure
    // index.html
    // 
    //  
    //    
    //  
    //  
    //    
Hello, World!
    //  
    // 
  

By following the above examples, you can effectively use `gulp-clean-css` to enhance your web development workflow by minifying and optimizing your CSS files.

Hash: 065d695187668ddbac4938fec37519a71717d8e2b264d24c285c6180c1e18735