در این مطلب با ادامه آموزش 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 هست.