در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
دیدید که در جلسه قبل محیط رو برای نصب Grunt آماده کردیم و از صحت نصب Node و npm مطمئن شدیم. در این جلسه قصد داریم Grunt رو بر روی سیستم خودمون نصب کنیم. اول از همه ما یک پروژه رو برای خودمون تعریف میکنیم و تعدادی فایل مختلف css و js و less و sass و تصویر و ... رو قرار میدیم. برای اینکار در Desktop یک پوشه میسازیم و اسم اون رو برابر با grunt قرار میدیم. بعد از اون پوشه‌های زیر رو در اون میسازیم:
میبینید که در این پوشه، دو پوشه بنام‌های development و final ساختیم. پوشه development همون فایلهای اولیه ما هستند که توی اونا کدهای خودمون رو مینویسیم و مدام اونا رو تغییر میدیم. ساختار پوشه‌های درون development بصورت زیر هست:
میبینید که برای شروع 5 تا پوشه قرار دادیم که فایلهای مختلف رو در اونا قرار میدیم. در ادامه اگر پوشه ای دیگه نیاز شد به اینجا اضافه میکنیم.
پوشه final همون پوشه ای هست که فایلهای نهایی و مدیریت شده ما در اونا ساخته میشه و ما میتونیم اونا رو آپلود کنیم و در سایتمون ازشون استفاده کنیم. یعنی چیزایی که در پوشه final قرار میگیره، فایلهایی هستند که Grunt اونا رو برای ما آماده سازی و بهینه کرده است. ساختار درونی final بصورت زیر است:
هدف ما اینه که فایلهای css رو فشرده سازی کنیم و فایلهای less و sass رو کامپایل کنیم و اونا رو پوشه css واقع در پوشه final قرار بدیم. همچنین تصاویر موجود در development فشرده سازی میشن و در final قرار میگیرن. فایلهای javascript هم به هم متصل شده و فشرده سازی میشن.
برای نصب و استفاده از Grunt شما در ابتدا باید Grunt-cli رو بر روی سیستم خودتون نصب کنید. cli مخفف command line interface هست و به شما قابلیت میده که grunt رو از طریق cmd مدیریت کنید. برای نصب grunt-cli بر روی سیستم، cmd رو باز کرده و بصورت زیر عمل میکنیم:
همونطور که میبینید میخایم با استفاده از npm این ابزار رو نصب کنیم. حتما -g رو قرار بدین تا این ابزار بصورت عمومی یا global بر روی سیستم شما نصب بشه و تا در همه جا بشه از اون استفاده کرد. بعد از اینکه متن بالا رو در Cmd نوشتید، اینتر بزنید تا اجرا بشه و بسته مورد نظر نصب بشه. بعد از اینکار اگه اروری نباشه، با چیزی شبیه به زیر روبرو میشید:
بعد از اون باید cmd رو با استفاده از دستور cd یا change directory به مسیر پوشه grunt در desktop ببریم. برای اینکار بصورت زیر عمل میکنیم:
بعد از زدن این دستور، اینتر رو فشار بدید:
میبینید که cmd به محل مورد نظر انتقال پیدا کرد. حالا باید با استفاده از دستور npm، فایل package.json رو برای پروژه خودمون بسازیم. برای اینکار باید از دستور npm init استفاده کنید. بصورت زیر:
همونطور که دیدید با زدن اینتر، یک سری متن نوشته شد و بعد از اون در خط آخر name یا نام پروژه از ما خواسته میشه. درون پرانتز مقدار پیش فرض که همون اسم پوشه هست قرار گرفته که شما میتونین اون رو تغییر بدین. من برای این قسمت grunt-project رو قرار میدم و اینتر میزنم:
بعد از اینکار description یا توضیحاتی رو برای پروژه خودتون قرار بدین. میتونین این قسمت رو خالی بزارید و به مرحله بعدی برید. من متنی رو برای مثال میزارم و اینتر میزنم:
در اینجا نمیخاد چیزی رو وارد کنید و اینتر بزنید. در مراحل بعدی نیز test command و git repository و keyword از شما خواسته میشه. لازم نیست که چیزی در مقابل این موارد قرار بدین و اینتر بزنید تا به مورد Author یا نویسنده یا سازنده برسید:
میبینید که اسمم رو وارد کردم و اینتر میزنم. بعد از اون license میاد و بزارید همون مقدار پیش فرض بمونه و اینتر بزنید. بعد از اینکه اینتر زدید یک پیش نمایش کلی از فایل نهایی در اختیارتون قرار میگیره و ازتون میپرسه که درست هست یا خیر:
میبینید که دور کدهای نهایی خط کشیدم. اگه دیدید که اطلاعات صحیح وارد شده، در مقابل Is this ok، عبارت yes و در غیر اینصورت عبارت no را وارد کنید. من yes رو وارد میکنم. بعد از اینتر زدن کار ما تموم میشه و یک فایل بنام package.json در پوشه grunt پروژه ما ساخته میشه. بصورت زیر:
بعد از اون اگر این فایل رو در یک ویرایشگر مثل Sublime Text وارد کنید، بصورت زیر خواهد بود:
تا اینجای کار خیلی از کارارو انجام دادیم و در جلسات بعدی اون رو ادامه میدیم. پس با ما همراه باشید.
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سلام مرسی از زحماتتون
در مورد git-repository که خالی گذاشتیم میشه یکم توضیح بدین؟
این ویژگی آدرسی که کدهای شما بصورت آنلاین قرار گرفتن رو مشخص میکنه. بیشتر زمانی از این مورد استفاده میشه که بصورت تیمی میخواید بر روی یک پروژه کار کنید. مثلا اگر پروژتون رو در سایت Github قرار داده باشید، میتونین آدرس صفحه رو بعنوان مقدار این ویژگی قرار بدین.
برای مطالعه بیشتر میتونین لینک زیر رو ببینید:
https://docs.npmjs.com/files/package.json#repository
در این لینک تمامی ویژگی های مربوط به فایل Package.json بصورت کامل توضیح داده شده است
موفق باشید
این جلسه عالی بود مث همیشه فقط یه سوال 🙂 این تم سابلیم شما اسمش چیه؟ خیلی قشنگه
سلام
خوشحالم که بدردتون خورده
این تم Material هست
https://github.com/equinusocio/material-theme
بصورت کامل توضیح داده شده که چطور اونو نصب و فعال کنید
موفق باشید