使用 Gulp + PostCSS 使用 cssnano 高级转换优化 CSS

Question

我目前的工作 gulpfile.js：

    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
    var cssnano = require('cssnano');

    gulp.task('css', function () {
        var plugins = [
            cssnano()
        ];
        return gulp.src('css/*.css')
            .pipe(postcss(plugins))
            .pipe(gulp.dest('css/min/'));
    });

Gulp 将所有的 CSS 传送到 PostCSS，后者通过 cssnano 运行它们，并且它们都在css/min 中。好的。

如何让 cssnano 使用高级转换？

理想情况下，使用变量或参数对象而不是外部配置脚本。我认为 anwser 可能在这个 cssnano guide page 上，但我不知道如何使它与 Gulp+PostCSS 一起工作。

Answer 1

您可以将选项传递给 cssnano 函数，所以我相信这是以下问题：

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var plugins = [
        cssnano({
            preset: ['advanced', {
                // preset options here, e.g...
                discardComments: { removeAll: true }
            }]
        })
    ];
    return gulp.src('css/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('css/min/'));
});

显然要确保你有cssnano-preset-advanced第一个通过npm install cssnano-preset-advanced --save-dev