خودکار کردن کارها با Gulp.js

اگه طراح یا توسعه دهنده ی وب هستید احتمالا خیلی اوقات به خیلی از کارها ( مثلا کامپایل sass و haml و مینیفای کردن اسکریپت‌ها) چنتا آب نکشیده نثار کردید. ابزارهایی وجود دارند که دسته ی بزرگی از کارها رو با اجرای یک دستور اجرا میکنند که معروفترینش شاید gnu make باشه که با یک دستور make معمولا برنامه ها رو در لینوکس کامپایل میکنیم یا rake که توسعه دهندگان روبی به وفور ازون استفاده میکنند.

برای توسعه ی فرانت‌اند هم بیلد سیستم های زیادی ایجاد شدند که grunt و gulp معروفترین و پرکاربرد ترین اونهاست که تو این مقاله gulp رو بررسی میکنیم.

تغییر اندازه‌ی تصویر زمینه بر اساس سایز دستگاه با css

در css، یکی از روش‌های تغییر اندازه‌ی تصویر زمینه متناسب با سایز صفحه نمایش استفاده از خاصیت background-size است.

اگر مقدار این خاصیت را برابر cover قرار دهید، تصویر بصورت خودکار و بر اساس سایز کل صفحه بطور کامل به عنوان تصویر زمینه قرار میگیرد. توجه داشته باشید که با این روش تصویر کشیده نمیشود و متناسب با سایز دستگاه بخشهایی از آن ممکن است نمایش داده نشود.

بصورت زیر میتوانید ازین خاصیت استفاده کنید.

body {
    background: url('http://bayanbox.ir/view/3671047358495111419/the-eiffel-tower-by-gemini-soul-d6s3rug.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

همچنین مثال بالا را بصورت زنده میتوانید در فیدلی که برای این پست ساخته شده امتحان کنید. فیدل امتحان این ویژگی...

همچنین گزینه های بیشتری هم برای background-size در دسترس است که میتوانید در MDN بیشتر مطالعه کنید. بیشتر ...