آموزش تبدیل SCSS به CSS با استفاده از Gulp

زبان SCSS یک نوع پیشرفته ای از CSS است با این تفاوت که میتوان متغیرها و حلقه ها را در آن به کار برد در صورتی که در CSS امکان آن نیست . همان طور که میدانید طراحی وب سایت بدون دانش CSS امکان پذیر نیست از طرفی روش های جدید نیز به بالا رفتن کیفیت کمک خواهد کرد.

یک روش بهتر و جدید استفاده از webpack است که بر اساس نیازی که برنامه نویسان frontend دارند  یک نسخه از آن را به صورت starter kit به شما معرفی میکنیم آن را از لینک زیر دریافت کنید میتوانید مشاهده و راه اندازی کنید. دستورات راه اندازی و build هم در پایین صفحه github درج شده است

https://github.com/wbkd/webpack-starter

webpack از gulp جدید تر و توانا تر است و استارتر فوق شما را در ساخت UI وب سایت میتواند بسیار کمک کند . پیشنهاد ما هم این است که از یک استارتر به روز مثل نمونه فوق استفاده نمایید.حالا اگر خیلی تمایل به استفاده از gulp را دارید روش تبدیل بسیار ساده است . کافی است ابتدا nodejs را نصب کنید این برنامه را میتوانید از سایت دانلود کنید. سپس یک پوشه جدید ساخته و بعد از وارد شدن به مسیر پوشه از طریق CMD یا وارد شدن در پوشه و کلیک راست در وسط صفحه و انتخاب Open Cmd here یا در ویندوز 10 ایتم Open powersheel windows here

تا اینجا مقدمات کار را پیش رفتیم.

  • در محیط CMD ابتدا دستور npm init را بزنید . سوالات را با زدن دکمه enter رد کنید
  • با زدن دستور npm install -g gulp نرم افزار Gulp را به صورت Global نصب کنید با این دستور یکبار این نرم افزار در Cache ویندوز شما قرار میگیرد و بعد از هر بار نصب لازم به دانلود آن نیست.
  • دستور npm install --save-dev gulp را وارد کنید . این دستور Gulp را در پوشه جاری که ساخته اید نصب میکند
  • دستور npm install --save-dev gulp-sass پلاگین تبدیل CSS به Sass یا SCSS را نصب میکند
  • حالا باید در Root یا همان پوشه ای که ساخته اید یک فایل با نام Gulpfile.js ایجاد کنید.
  • ساختار برنامه شما باید به این صورت باشد
  • ساختار برنامه شما باید مانند شکل زیر باشد

 

    https://ryanchristiani.com/getting-started-with-gulp-and-sass/


      گندم ابراهیمی
      چقددد عاااالی توضیح دادید. مگه داریم.... مرسیییی واقعا مرسی عالی
      مطالبی که به شما پیشنهاد میشود