در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
در این جلسه قصد داریم در مورد پلاگین grunt-responsive-images صحبت کنیم و با استفاده از اون تصاویر مختلفی رو داریم مدیریت کنیم و سایزهای مشخصی رو از اونا بسازیم که در سایت واکنشگرای خودمون از اونا استفاده کنیم. این ابزار بر روی تصاویر jpg و png و gif کار میکنه و تفاوتی نداره. فرض کنید که شما تصاویرهای مختلفی با سایزهای مختلف دارید و نمیخاید بصورت دستی اونا رو تغییر سایز بدید. با این ابزار به سادگی میتونین سایزهای مورد نظرتون با سرعت بسیار زیادی تولید کنید. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:
npm install grunt-responsive-images --save-dev
بعد از اینکار اینتر میزنیم:
میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:
حالا باید این بسته رو درون gruntfile.js لود کنیم:
این ابزار پیش نیازی بنام GraphicsMagick داره و لازمه که برای استفاده از این ابزار، این پیش نیاز رو در ابتدا نصب و فعال کنید. برای دانلود این ابزار به این لینک برید:
همونطور که در بالا میبیند آخرین نسخه این ابزار 1.3.25 هست. بر روی اون کلیک کنید:
با توجه به ویندوزتون نسخه مورد نظر رو انتخاب و دانلود کنید. من چونکه ویندوزم 64 بیتی هست، مورد مشخص شده رو دانلود میکنم. با کلیک بر روی لینک مورد نظر بعد از چند لحظه، دانلود شروع میشه. بعد از اتمام دانلود بر روی فایل دانلود شده دوبار کلیک کنید تا فرآیند نصب آغاز بشه:
روی next کلیک کنید:
موارد مورد نظر رو انتخاب کنید:
روی next کلیک کنید:
محل نصب رو مشخص کنید:
بر روی Next کلیک کنید:
در آخر مواظب باشید که تیک بالایی حتما خورده باشه.
در انتها با کلیک بر روی Install این ابزار بعد از چند لحظه کوتاه در سیستم شما نصب میشه و حالا میتونین از پلاگین grunt-responsive-images استفاده کنید. در جلسه بعدی این پلاگین رو آموزش میدیم و با هم یاد میگیریم که چطور تصاویرمون رو به سایزهای مدنظرمون تبدیل کنیم (اونم بی دردسر).
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !