آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 33) - تبدیل تصاویر به سایزهای مختلف برای سایتهای واکنشگرا : قسمت 1

- visibility ۰ mode_comment

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-responsive-images صحبت کنیم و با استفاده از اون تصاویر مختلفی رو داریم مدیریت کنیم و سایزهای مشخصی رو از اونا بسازیم که در سایت واکنشگرای خودمون از اونا استفاده کنیم. این ابزار بر روی تصاویر jpg و png و gif کار میکنه و تفاوتی نداره. فرض کنید که شما تصاویرهای مختلفی با سایزهای مختلف دارید و نمیخاید بصورت دستی اونا رو تغییر سایز بدید. با این ابزار به سادگی میتونین سایزهای مورد نظرتون با سرعت بسیار زیادی تولید کنید. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

بعد از اینکار اینتر میزنیم:grunt responsive image

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt responsive image 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt responsive image 3

این ابزار پیش نیازی بنام GraphicsMagick داره و لازمه که برای استفاده از این ابزار، این پیش نیاز رو در ابتدا نصب و فعال کنید. برای دانلود این ابزار به این لینک برید:install GraphicsMagick

همونطور که در بالا میبیند آخرین نسخه این ابزار 1.3.25 هست. بر روی اون کلیک کنید:install GraphicsMagick 2

با توجه به ویندوزتون نسخه مورد نظر رو انتخاب و دانلود کنید. من چونکه ویندوزم 64 بیتی هست، مورد مشخص شده رو دانلود میکنم. با کلیک بر روی لینک مورد نظر بعد از چند لحظه، دانلود شروع میشه. بعد از اتمام دانلود بر روی فایل دانلود شده دوبار کلیک کنید تا فرآیند نصب آغاز بشه:install GraphicsMagick 3

روی next کلیک کنید:install GraphicsMagick 4

موارد مورد نظر رو انتخاب کنید: install GraphicsMagick 7

روی next کلیک کنید: install GraphicsMagick 5

محل نصب رو مشخص کنید:install GraphicsMagick 8

بر روی Next کلیک کنید:

install GraphicsMagick 6

در آخر مواظب باشید که تیک بالایی حتما خورده باشه.install GraphicsMagick 9

در انتها با کلیک بر روی Install این ابزار بعد از چند لحظه کوتاه در سیستم شما نصب میشه و حالا میتونین از پلاگین grunt-responsive-images استفاده کنید. در جلسه بعدی این پلاگین رو آموزش میدیم و با هم یاد میگیریم که چطور تصاویرمون رو به سایزهای مدنظرمون تبدیل کنیم (اونم بی دردسر).

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.