برای اینکار باید مراحل زیر رو طی کنیم :

1. اکثر autoprefixer‌ها لیست آخرین تغییرات مرورگر‌ها رو به صورت اتوماتیک میگیرن با آپدیت هاشون.
اما بد نیست شما هم به صورت دستی هر چند وقت این لیست رو آپدیت کنید

دستور آپدیت browserslist در bash :

npm browserslist@latest --updatep-db

2. جهت تنظیم اینکه ساپورت و اضافه شدن رندر پریفیکس‌ها به پروژه دقیقا به چه صورت باشه باید به فایل package.json اضافه شده به پروژه به هنگام استفاده از gulp، تنظیم زیر رو اضافه کنید :

"devDependencies": {
    //packages
  }, // <-- dont forget this comma
  "browserslist": [
    //your setting
  ]

مساله ای که وجود داره اینه که تنظیماتمون رو بر چه اساس تنظیم کنیم؟

خود browserslist یک تنظیمات پیش فرضی با اسم defaults داره که شامل شروط زیر میشه :

1. بیشتر از 0.5 درصد از اون مرورگر در جهان استفاده بشه 

یا

2. آخرین دو نسخه ی آپدیت شده ی مرورگر ها 

یا

3. فایرفاکس 

و
4. مرده نباشه (ینی بیشتر از 24 ماه از آخرین آپدیتش نگذشته باشه)

که میشه :

>0.5%,

last 2 versions,

Firefox ESR,

not dead

علامت ‘,’ نشون دهنده ی or هست.

که خب اگر تنظیمات فوق رو قبول دارید و مناسب پروژه هست میتونید تنظیمات browserslist رو به صورت زیر قرار بدید :

  "browserslist": [
    "defaults"
  ]

اگر هم میخواید بیشتر مطالعه کنید یا تنظیمات بیشتری رو اضافه کنید باید به این لینک مراجعه کنید.

3. پکیج‌های مورد نیاز رو از طریق npm نصب میکنید :

npm install --save-dev postcss
npm install --save-dev gulp-postcss
npm install --save-dev autoprefixer
npm install --save-dev gulp-sourcemaps

4. کد‌های زیر رو داخل بخش gulpfile.js اضافه میکنید :

بخش اول، import یا require کردن ها 

توجه :  اگر مشکلی با require نداشتید و از نسخه‌های قدیمی‌تر node استفاده میکنید از همون متد استفاده کنید. برای مطالعه بیشتر به این تاپیک سر بزنید.

import gulpSass from "gulp-sass"; //for compiling SASS
import sassComp from "sass";      //for compiling SASS
import autoprefixer from "autoprefixer";  //for render prefixes
import sourcemaps from "gulp-sourcemaps"; //for render prefixes
import postcss from "gulp-postcss";       //for render prefixes
const sass = gulpSass(sassComp);  //for compiling SASS

نکته : با توجه به اینکه پکیج node-sass  منسوخ شده باید از پکیج sass یا dart-sass برای کامپایل فایل‌های sass استفاده کنید. مطالعه بیشتر

بخش دوم، کد‌های تسک :

//Sass compiler
gulp.task("sass-compile", async function () {
  gulp
    .src("src/assets/sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ errLogToConsole: true }))
    .on("error", catchErr)
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/assets/css"));
});
function catchErr(e) {
  console.log(e);
  this.emit("end");
}

کد‌های فوق ابتدا فایل‌های scss رو به css کامپایل میکنه سپس رندر پریفیکس‌ها رو بهش اضافه میکنه.

بخش minify کردن فایل‌های css رو فعلا نیازی نداشتم و ننوشتم، به همون روش استاد میتونید اضافه کنید. 

منم وقتی اضافه کردم تاپیک رو آپدیت میکنم.