用cssnano高级变换优化CSS的Gulp + PostCSS

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/'));
    });

将所有的CSS管道输送到运行它们的PostCSS，然后它们都以css/min的方式登陆。好的。

如何使cssnano使用高级转换？

理想情况下，使用vars或参数对象而不是extarnal脚本。我认为分析程序可能在这个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