Minify CSS with Gulp via .pipe

Question

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'));
});

score 2 · Accepted Answer · answered Feb 26 '18 at 13:01

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'));
});

Minify CSS with Gulp via .pipe

1 Answers1