کامپایل کردن کدهای Sass و Scss در Phpstorm با Ruby

در این آموزش می خواهیم شما را با نحوه کامپایل کردن scss در phpStorm به وسیله Ruby (روبی) ، آشنا کنیم.

همونطور که می دونید ساختار Scss یک ساختار ناشناخته برای مرورگر می باشد.

بدین معنی که کدهایی که در ساختار Scss نوشته می شوند بایستی به زبان css کامپایل شده و سپس به مرورگر نسخه کامپایل شده این ساختار رو تحویل دهیم.

ابزارهای مختلفی مانند node.js هم هست که این کار و انجام میده ولی من خودم به شخصه در محیط ویندوز از روبی استفاده میکنم چون هم استفاده ازش آسونه و تو همه پروژه هام می تونم به سادگی استفاده کنم و هم اینکه هیچ فایل اضافه ای به پروژه هام اضافه نمی کنه.

خب برای انجام کامپایل کردن Scss در phpStorm در مرحله اول نیاز به نرم افزار phpStorm دارید که می تونید از لینک زیر دانلود کنید :

نرم افزار phpStorm

بعد از اینکه نرم افزار phpstorm رو دانلود و نصب کردید بایستی نرم افزار روبی رو هم دانلود و بر روی سیستم عامل خودتون نصب کنید. البته لازم به ذکر که باید نسخه تحت سیستم عامل مورد نظر خودتون رو از سایت روبی دانلود کرده و نصب نمایید.

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

دانلود نصب کننده Ruby جهت کامپایل کردن Scss در phpStorm

جهت دانلود روبی کافیه مراحل زیر رو طی کنید. البته از ویدیوی این قسمت نیز می تونید استفاده کنید.

1. در گوگل Ruby installer را سرچ نمایید.
2.  به سایت Ruby رفته و دانلود را انتخاب نمایید.
3.  بر حسب سیستم عامل خود که ۶۴ یا ۳۲ بیتی است، روبی را دانلود نمایید.

نصب Ruby بر روی سیستم عامل ویندوز

بعد از اینکه روبی را دانلود کردید Ruby installer را اجرا کرده و مراحل زیر را طی کنید :

۱- گزینه I Accept the license را انتخاب کرده و Next را بزنید.

۲- سپس آدرس Ruby که میخواهید در کدام درایو شما نصب شود را انتخاب کرده و Install را بزنید. ( توصیه می شود این مورد را تغییر ندهید!)

۳- در این مرحله هیچ یک از گزینه ها را تغییر نداده و بر روی Next کلیک کنید.

۴- منتظر می مانیم تا نصب روبی به پایان برسد.

نصب که به اتمام رسید روبی خودکار cmd ویندوز را اجرا می کند که یک صفحه سیاه حاوی ۳ گزینه است.

در اینجا عدد ۱ را وارد نموده و اینتر بزنید تا روبی راه اندازی شود.

بعد از اتمام راه اندازی جهت اطمینان از نصب روبی cmd ویندوز اجرا کرده و دستور زیر را وارد نمایید :

gem –v

در صورتی که روبی با موفقیت بر روی سیستم عامل شما نصب شده باشد، نسخه نصب شده روبی را مطابق شکل زیر مشاهده خواهید نمود.

در غیر این صورت مراحل نصب روبی را مجددا انجام دهید.

خب تا این جای کار نصب روبی تمام شد. اما سوالی که مطرح میشه اینه که چجوری از روبی استفاده کنیم؟

پاسخ این سوال به این صورته که ما ابتدا بایستی کتابخانه مورد نیاز روبی رو که برای کامپایل کردن کدهای sass ایجاد شده است رو نصب کنیم.

برای نصب هم مراحل زیر را طی می کنیم:

نصب کتابخانه Sass بر روی Ruby

بعد از اینکه نصب Ruby به پایان رسیدcmd ویندوز را اجرا کرده و دستور زیر را وارد و اینتر بزنید تا نصب کتابخانه sass شروع شود.

gem install sass

توجه داشته باشید در برخی موارد جهت نصب کتابخانه sass نیازمند اتصال به فی ل تر ش ک ن خواهید بود البته توصیه ما این است که جهت امنیت بیشتر و دسترسی با سرعت بالا از تحریم شکن استفاده نمایید.

بعد از اینکه نصب کتابخانه sass به پایان رسید نرم افزار phpstorm رو اجرا کنید.

بعد از اجرای نرم افزار Phpstorm به مسیر زیر می رویم تا یک File Watcher جدید ایجاد کنیم و کامپایل کردن Scss در phpStorm انجام بدیم.

File -> Settings -> Tools -> File Watchers

در این صفحه برای اضافه کردن یک Watcher در پایین صفحه و یا سمت راست صفحه بر روی + کلیک کرده و از لیست باز شده گزینه SCSS را انتخاب می کنیم.

پنجره New File Watcher باز میشه که یک سری مقادیر رو در اختیار ما قرار داده که با تنظیم این موارد می توانیم Watcher مورد نیازمون رو ایجاد کنیم.

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

1.  در قسمت Name یک نام دلخواه انتخاب کنید.
2.  در قسمت File to Watch گزینه ای تغییر داده نمیشود.
3.  در قسمت Tool to Run on changes: در این گزینه شما می توانید تنظیمات مربوط به نوع تبدیل scss به css را انجام دهید و ویژگی های فایل هایی که به صورت خودکار ایجاد میشوند را هم می توانید به دلخواه تغییر دهید.

در مورد آرگومان هایی که صحبت شد من توی تمام پروژه هام از آرگومان های زیر استفاده می کنم :

–style compressed –no-cache

فقط توجه داشته باشید که این آرگومان ها رو در ادامه آرگومان های موجود وارد نمایید.

توجه : در قسمت Program ، برنامه ای که watcher از آن استفاده میکند تا دستورات را اجرا کند انتخاب کنید سپس ok را بزنید. اصولا اگر شما کتابخانه sass را بر روی Ruby نصب کرده باشید نرم افزار phpstorm به صورت خودکار کتابخانه sass را شناسایی می کند.

خب این هم از آموزش امروزمون امیدوارم که براتون مفید واقع شه. بازم هرگونه نظر ، پیشنهاد و یا انتقادی داشتید از قسمت نظرات با ما در میان بگذارید.