通过 .pipe 将 CSS 缩小为 Gulp

Question

是否可以使用诸如 clean-css 之类的插件，以便 CSS 在每个页面 refresh/save 上缩小..？我如何通过管道链接它以便它到达缩小的 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'));
});

通过 .pipe 将 CSS 缩小为 Gulp

Minify CSS with Gulp via .pipe

css

gulp

bundling-and-minification

gulp-clean-css