Как настроить 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

2. В вашем gulpfile.js импортируйте необходимые модули:

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

3. Соберите задачу 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, чтобы отключить каскадное форматирование.

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

gulp styles

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

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