اضافه کردن تسک render prefix ها به gulp

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

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 رو فعلا نیازی نداشتم و ننوشتم، به همون روش استاد میتونید اضافه کنید. 

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