Оптимизация CSS с помощью расширенных преобразований cssnano с использованием Gulp + PostCSS - PullRequest
Новая
       88

Оптимизация CSS с помощью расширенных преобразований cssnano с использованием Gulp + PostCSS

0 голосов
/ 27 апреля 2020

Мой текущий рабочий файл 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 к Post CSS, который пропускает их через cssnano, и все они приземляются в css / min. . Ницца.

Как заставить cssnano использовать расширенные преобразования?

В идеале, с переменными или объектами параметров вместо внешних конфигурационных скриптов. Я думаю, что ответчик может быть на этой странице руководства cssnano , но я не знаю, как заставить его работать с Gulp + Post CSS.

1 Ответ

0 голосов
/ 28 апреля 2020

Вы можете передать опции в функцию 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

...