css - 通过 .pipe 使用 Gulp 缩小 CSS

Question

是否可以使用诸如 clean-css 之类的插件，以便在每次页面刷新/保存时缩小 CSS ..？我将如何通过管道链接它，以便它到达缩小的 dist 文件夹？谢谢你的帮助！

这是当前代码：

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

Answer 1

您可以使用 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'));
});