Как настроить gulp-autoprefixer, куда пропал параметр настройки browsers?

В версии gulp-autoprefixer 10.0.0 и выше, параметр настройки browsers был удален в пользу использования опции overrideBrowserslist.

OverrideBrowserslist является общей опцией, которую можно использовать во многих инструментах, включая Babel, Autoprefixer и другие, и она позволяет указать список префиксов браузеров, с которыми вы хотите поддерживать совместимость.

Чтобы настроить gulp-autoprefixer с использованием overrideBrowserslist, следуйте этим шагам:

  1. Установите gulp-autoprefixer с помощью npm или yarn:
npm install --save-dev gulp-autoprefixer

или

yarn add --dev gulp-autoprefixer
  1. В вашем gulpfile.js импортируйте необходимые модули:
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
  1. Соберите задачу Gulp, в которой будет использоваться gulp-autoprefixer:
gulp.task('styles', function() {
  return gulp.src('src/css/**/*.css')
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('dist/css'));
});

Вышеуказанный пример демонстрирует задачу Gulp, которая применяет автопрефиксер к CSS-файлам, находящимся в папке src/css. Браузеры, которые будут поддерживаться, указаны в поле overrideBrowserslist как ['last 2 versions']. Параметр cascade установлен в false, чтобы отключить каскадное форматирование.

  1. Запустите задачу Gulp в вашей командной строке:
gulp styles

При выполнении этой команды gulp-autoprefixer обработает все ваше CSS и сгенерирует префиксы, основываясь на заданных вами параметрах overrideBrowserslist.

Таким образом, вы можете использовать overrideBrowserslist для настройки совместимости с браузерами в gulp-autoprefixer начиная с версии 10.0.0.