در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
در جلسه قبل توضیحاتی در مورد grunt و بسته‌های اون دادیم و صفحه مربوط به pluginهای اون رو بصورت کامل توضیح دادیم. حالا میخایم 14 عدد از پلاگینهایی که کاربرد بیشتری دارن و خود تیم grunt اونا رو توسعه داده براتون معرفی کنیم و توضیحاتی مقدماتی برای هر کدوم در اختیارتون قرار بدیم. در جلسات بعدی نحوه استفاده از هر کدوم رو به تفصیل در اختیارتون میزارم.
پلاگین 1 : grunt-contrib-concat
با استفاده از این پلاگین میتونیم فایلهای css و js مختلف رو به هم متصل کنیم و چند فایل رو به صورت یک فایل در بیاریم. با اینکار تعداد درخواست یا requestهای سایتتون کمتر میشه و سرعت لود سایتتون سریعتر میشه و از نظر seo هم بهتره. با استفاده از این ابزار میشه چند فایل css رو به یک فایل Css و همچنین چند فایل js رو به یک فایل js تبدیل کنید. در صفحه پلاگینهای grunt بر روی این پلاگین کلیک میکنیم تا به سایت npmjs بریم:
توضیحات مربوط به تصویر بالا:
- در این قسمت نام و توضیحات این پلاگین قرار داده میشه. همونطور که میبینید برای توضیحات اون عبارت Concatenate files قرار گرفته و به معنای همون ترکیب کردن چند فایل هست
- در این قسمت و به سمت پایین توضیحاتی رو در مورد نحوه استفاده از پلاگین میده
- در اینجا آخرین فردی که در پلاگین تغییر داده رو معرفی میکنه
- در این قسمت آخرین ورژنی که برای این پلاگین release یا معرفی شده، قرار میگیره
- در اینجا لینک صفحه github مربوط به این پلاگین قرار داده شده
- در این قسمت هم license یا مجوز این پلاگین قرار داده شده
اگر کمی به سمت پایین اسکرول کنیم، بصورت زیر خواهد بود:
توضیحات مربوط به تصویر بالا:
- در این قسمت افرادی که در این پلاگین سهیم هستن رو قرار میده
- تعداد دانلود در روز گذشته
- تعداد دانلود در هفته گذشته
- تعداد دانلود در ماه گذشته
- تعداد مشکلات یا issues فعال یا حل نشده
- تعداد درخواست‌های فعال برای تغییر و توسعه
- در این قسمت هم مشخص میشه که این پلاگین به چه بسته هایی نیاز دارن و همچنین چه بسته هایی به این پلاگین وابسته هستن
اگر به انتهای صفحه هم بریم، بصورت زیر خواهد بود:
همونطور که میبینید تاریخ انتشار هر کدوم از نسخه‌های مورد نظر رو قرار داده و شما میتونین تاریخ اون رو ببینید.
پلاگین 2 : grunt-contrib-less
با استفاد از این پلاگین میتونین فایلهای less رو کامپایل کرده و خروجی css اونا رو تهیه کنید. همونطور که میدونین less یک preprocessor مربوط به css هست.
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
با تشکر ولی بهتر بود gulp رو کار میکردین بجای grant .
به اونم خواهیم رسید
ولی گرانت هم خیلی خوب و جا افتاده هست و در بعضی از موارد از gulp بهتره
بالاخره ما جفتشو خواهیم گفت و هر کدوم رو کاربران دوس داشتن ادامه میدن
موفق باشید
بسیار ممنون از آموزشهای خوبی که با دقت فراوان انتخاب و توضیح می دهید خسته نباشید
سلام
خواهش میکنم دوست عزیز
خوشحالم که بدردتون خورده
موفق باشید