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.
gulp-clean-css
![Climate](https://img.shields.io/codeclimate/github/scniro/gulp-clean-css.svg?label=climate&style=flat-square)
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.
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
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.
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
return gulp.src('styles/*.css')
.pipe(cleanCSS({debug: true}, function(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.
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('minify-css', function() {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
License
MIT © 2016 scniro