cssgulpbundling-and-minificationgulp-clean-css

Minify CSS with Gulp via .pipe


Is it possible to use a plugin such as clean-css, so the CSS is minified upon every page refresh/save..? How would I chain it via pipe so it reaches the dist folder minified? Thanks for any help!

This is the current code:

gulp.task('styles', function(){
    return gulp.src('css/style.css')
        .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
        .on('error', function(errorInfo){
            console.log(errorInfo.toString());
            this.emit('end');
        })
        //stylesheet destination folder
        .pipe(gulp.dest('dist/styles'));
});

Solution

  • You can use uglifycss:

    uglifycss = require('gulp-uglifycss');
    
    gulp.task('styles', function(){
        return gulp.src('css/style.css')
            .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
            .on('error', function(errorInfo){
                console.log(errorInfo.toString());
                this.emit('end');
            })
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            //stylesheet destination folder
            .pipe(gulp.dest('dist/styles'));
    });