Gulp-clean-css is a useful gulp plugin used for CSS minification. It harnesses the power of clean-css to accomplish this task. By minimizing your CSS files, gulp-clean-css assists in improving your website's load speed, thus enhancing user experience and promoting SEO optimization.
To utilize gulp-clean-css, begin by installing the package with the command npm install gulp-clean-css --save-dev. You can afterward integrate it into your Gulp tasks. Here are a few code examples indicating how gulp-clean-css can be used:
Basic usage for minifying CSS, storing the result in a different directory:
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
Using the plugin with a callback to log the details of the minification process:
const gulp = require('gulp');
const 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'));
});
Using gulp-clean-css along with gulp-sourcemaps to generate source maps:
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const 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'));
});
The documentation for gulp-clean-css can be found in the plugin's README on the GitHub repository. A more comprehensive overview of the type of options available for use in the plugin can be acquired from CleanCSS options. While using this plugin, keep in mind that most of the complicated issues are generally linked to clean-css, the underlying engine. When faced with CSS-related issues, it's suggested to seek assistance from the clean-css repository.
