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

【问题标题】：Optimizing CSS with cssnano advanced transforms using Gulp + PostCSS使用 Gulp + PostCSS 使用 cssnano 高级转换优化 CSS
【发布时间】：2020-08-11 01:09:34
【问题描述】：

我目前工作的 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 可能在this cssnano guide page，但我不知道如何使它与 Gulp+PostCSS 一起工作。

【问题讨论】：

标签： css gulp postcss cssnano

【解决方案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/'));
});

显然，确保您首先通过npm install cssnano-preset-advanced --save-dev 获得cssnano-preset-advanced

【讨论】：