css - 使用 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 使用高级转换？

理想情况下，使用 vars 或参数对象而不是外部配置脚本。我认为 anwser 可能在这个 cssnano 指南页面上，但我不知道如何使它与 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