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

- visibility ٠ mode_comment

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

grund

در جلسه قبل پلاگین grunt-responsive-images و همچنین ابزار GraphicsMagick v رو نصب کردیم و در این جلسه قصد داریم این پلاگین رو تنظیم کنیم که وظایف رو برامون انجام بده. در ابتدا درون پوشه های final و development پروژه خودمون، پوشه ای بنام img میسازیم و تصاویرمون رو در اون قرار میدیم. تصاویر زیر رو دانلود کنید:

در این فایل دو تصویر با سایز و فرمت مختلف با نامهای img1.jpg و img2.png قرار داده شده و باید اونا رو در پوشه img واقع در development قرار بدیم. کار ما در این جلسه اینه که سایزهای مورد نظر، از تصاویر مورد نظر رو بسازیم و اونا رو در پوشه img موجود در final قرار بدیم. در ابتدا باید یک وظیفه بنام responsive_images بسازیم. بصورت زیر:grunt responsive image

یک sub task بنام resize براش میسازیم:grunt responsive image 2

حالا محل فایلهای ورودی و خروجی رو مشخص میکنیم و اونا رو درون files قرار میدیم:grunt responsive image 3

همونطور که دیدید مسیرهای ورودی و خروجی رو به سادگی مشخص کردم. این ابزار تظیمات زیادی داره و مهمترین ویژگی اون sizes هست که میتونین با استفاده از اون سایز و ویژگی های تصاویر خروجی رو مشخص کنید. در ابتدا باید یک options اضافه کنیم تا بتونیم تنظیمات مورد نظر خودمون رو قرار بدین و موارد پیش فرض رو بازنویسی یا override کنیم:grunt responsive image 4

حالا ویژگی sizes رو درون options قرار میدیم. این پلاگین بصورت پیش فرض سه سایز کوچک و متوسط و بزرگ و با عرض به ترتیب 320 و 640 و 1024 براتون میسازه و در خروجی قرار میده. حالا ما میخایم این موارد رو تغییر بدیم. برای اینکار بصورت زیر عمل میکنیم:grunt responsive image 5

اگر کل وظیفه رو بخام قرار بدم بصورت زیر هست:

خب دیدید که برای مقدار ویژگی sizes یک آرایه با سه عضو مشخص کردیم. در نتیجه سه خروجی خواهیم داشت. میتونین این تعداد رو کمتر و بیشتر هم بکنید. هر عضو خودش یک شئ یا object هست و property و value هایی داره. ویژگی name باعث میشه که یک رشته به انتهای نام تصویر خروجی اضافه بشه و اونو مشخص کنه. مثلا اگر برای تصویر img1 مقدار name رو برابر با medium قرار بدیم، نام تصویر خروجی بصورت img-medium خواهد شد.

با استفاده از width میتونین عرض مورد نظر رو برای اون حالت مشخص کنید. ویژگی aspectRatio بصورت پیش فرض فعال هست و ارتفاع متناسب با width تغییر میکنه و حالت تصویر بهم نمیخوره.

با استفاده از ویژگی quality میتونین کیفیت تصویر خروجی رو تغییر بدین. برای این ویژگی میتونین عددی بین 0 تا 100 قرار بدین و مقدار پیش فرض اون 100 هست. این ویژگی فقط برای تصاویر jpg کاربرد داره و برای بقیه موارد تاثیری ندارد.

با استفاده از ویژگی suffix هم میتونین یک رشته به انتهای نام تصویر خروجی اضافه کنید و به اون پسوند بدید. مثلا میتونین برای تصاویری که در صفحات رتینا مورد استفاده قرار میگیره عبارت _x2 اضافه کنید.

حالا اگر cmd رو باز کنیم و عبارت grunt responsive_images رو تایپ کرده و اینتر بزنیم، بصورت زیر خواهد بود:grunt responsive image 6

دیدید که دو تصویر برای small و medium و large ساخته شد و در مجموع 6 تصویر در پوشه img قرار میگیره:grunt responsive image 7

بهمین راحتی تونستیم این کار رو انجام بدیم.

برای مطالعه بیشتر در مورد این ابزار به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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