使用 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 可能在 this 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/'));
});

显然要先通过 npm install cssnano-preset-advanced --save-dev

确保您已获得 cssnano-preset-advanced

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

Optimizing CSS with cssnano advanced transforms using Gulp + PostCSS

css

gulp

postcss

cssnano