در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش دریافت و Build کردن 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 کنید.


نویسنده: حسین احمدی

منبع: TOSINSO

هر گونه نشر و کپی برداری با ذکر نام نویسنده و منبع بلامانع است.

0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....