آموزش دانلود و بیلد ( Build ) کردن Semantic UI به زبان ساده
چگونه از سمنتیک یو آی ( Semantic UI ) استفاده کنیم؟ در مقاله قبلی در مورد ویژگی ها و امکانات Semantic UI صحبت کردیم و دیدیم که از نظر امکانات یک کتابخانه بسیار قدرتمند و کاربردی هست. اما برای استفاده از این کتابخانه باید ابتدا با استفاده از ابزاری به نام gulp عملیات build رو بر روی اون انجام بدیم و از خروجی تولید شده در کارها استفاده کنیم. در این مطلب قصد داریم نحوه نصب gulp و استفاده از اون رو برای build کردن semantic ui توضیح بدیم. در قدم اول شما باید node js رو بر روی سیستمی که قصد build کردن semantic ui رو دارید نصب کنید. ابتدا از این لینک node js رو دانلود و نصب کنید. بعد از نصب node js وارد محیط Command Prompt بشید و دستور زیر رو وارد کنید:
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
> npm --v
در صورتی که node رو به درستی نصب کرده باشید، باید نسخه نصب شده در خروجی نمایش داده بشه. npm یک package manager قدرتمند هست که می تونید package های مختلفی رو بوسیله این ابزار دریافت کنید.برای قدم بعدی باید gulp رو نصب کنیم. برای اینکار از npm و دستور زیر استفاده می کنیم:
> npm install -g gulp
با اجرای دستور بالا gulp بر روی سیستم شما نصب میشه. به سوئیچ g در دستور بالا دقت کنید، در صورتی که این switch رو ننویسیم، gulp به صورت local و داخل folder ای که npm اجرا شده نصب میشه، اما با سوئیچ g به صورت عمومی نصب شده و همه در دسترس شما هست.بعد از نصب gulp باید semantic ui رو دریافت کنیم. ابتدا پوشه ای با نام SemanticUI داخل یکی از درایو ها ایجاد کنید، وارد پوشه بشید و دستور npm زیر رو اجرا کنید:
> npm install semantic-ui --save
با اجرای دستور بالا Semantic UI داخل پوشه مورد نظر دانلود و ذخیره میشه. بعد از اتمام عملیات دانلود، منویی شبیه به منوی زیر برای شما نمایش داده میشه:
[20:56:35] Starting 'run setup'... ? Set-up Semantic UI Automatic (Use default locations and all components) Express (Set components and output folder) > Custom (Customize all src/dist values)
از بین سه گزینه مورد نظر، گزینه Custom رو برای انتخاب گزینه ها و build کردن Semantic UI انتخاب کنید و مراحل رو به ترتیب جلو برید، مراحل شامل انتخاب پوشه مورد نظر جهت ایجاد فایل های خروجی، انتخاب Component ها جهت Build کردن و اینکه آیا نیاز به نسخه RTL هم دارید یا خیر میشه که با جواب دادن به هر مرحله فایل های خروجی داخل پوشه ای به نام dist برای شما ایجاد میشه. دقت کنید که برای RTL یا همون راست به چپ می تونید خروجی رو تنها برای RTL، یا LTR و یا هر دو ایجاد کنید. فایل های CSS و JS رو از پوشه dist به پروژتون اضافه کنید و شروع به استفاده از Semantic UI کنید.