اتوماتیک سازی فرانت اند

اتوماتیک سازی فرانت اند

بزارید از اونجای شروع کنم که اصلا حس میکنیم باید چیزی وجود داشته باشه که کارهامون رو اتوماتیک سازی کنه .امروز قصد داری تا درباره حس اتوماتیک سازی فرانت اند با ابزار  gulpبیشتر صحبت کنیم.

شروع حس نیاز

من مدت زیادیه که مشغول طراحی وب و انجام کد نویسی های سمت کلاینت هستم و در طول این مسیر تجربه های زیادی به دست آوردم . برای مثال قبل از استفاده از gulpJs من برای فشرده سازی فایل های js و css و html همیشه کدهاشون رو از طریق سایت های مختلف فشرده سازی میکردم میدونید این یعنی چی ؟

 این یعنی اینکه اگر هر تغییری دادید باید دوباره کدتون رو ببرید داخل مرورگر ، داخل سایت مورد نظر و دوباره عملیات فشرده سازی رو انجام میدادید . اصلا بزارید بگم چرا فشرده سازی ؟ بخاطر کم شدن حجم فایل ها و افزایش سرعت لود وبسایت ها این خیلی مهمه خیلیییی . پس اینم یه نکته از طرف من 😀 . حالا فشرده سازی فقط یکی از هزاران کاری هست که میتونید انجام بدید .

 کارایی مثل الحاق فایل ها ، Sync کردن ویرایشگرتون با مرورگر ، انواع کامپایل های مختلف در کدهاتون و اصلا هر کاری که فکرشو کنید . باور کنید خیلی از این کارها رو حتی نمی دونستم خیلی ساده با یه ابزار قابل انجامه و همیشه کمبود چنین ابزاری رو در پروژه هام احساس میکردم . تا زمانی که با GulpJs آشنا شدم .

آشنایی با Gulp

خود Gulp خیلی ساده اس ، چهار کار اصلی یا بهتر بگم ، چهار Api اصلی داره که سعی میکنم در مورد هر چهارتاشون در همین مقاله یه توضیح کوتاه بدم . تمام Gulp با همین ۴ api اصلی بنا شده. بترتیب اسم این متد هاTask ،src،dest و watch هست.

Gulp با فلسفه Task Runner ها وارد کار شد یعنی اینکه شما بیاید کارهای تعریف کنید که با اجرا کردنش حالا چه بصورت دستی یا اتوماتیک یک سری وظایف انجام بشه. وظایفی مثل کامپایل فایل­های cssو الحاق فایل های مختلف، انالیزکردن کد ها و هزاران کار دیگه.

خب داستان از این قراره که در چند مدت پیش بدلیل چالش های مختلف، افراد زیادی تمایل نداشتن که با استفاده از جاوا اسکریپ چنین ابزارهای برای انجام چنین کارهای رو ایجاد کنند. اما وقتی NodeJs وارد کار شد داستان متفاوت شد هزاران نفر هر روز براش پلاگین مینویسن و هر روز هزاران نفر جدید به سمتش کشده میشن بخاطر کارهای جالبی که میشه باهاش انجام داد.

اولین ابزاری که با فلسفه Task Runner بوجود اومد Grunt بود و با اومدنش کارها رو متحول کرد بصورتی که خیلی خیلی از کارهای که یک برنامه نویس سمت Front-end باید انجام میداد رو به حداقل خودش رسوند.

اگر عاشق جاوا اسکریپت و NodeJs هستید قطعا Gulp براتون عالی تره و با کدنویسی داخل اون راحتر خواهید بود. فرض کنید با تعریف Taskهای مختلف و با وارد کردن یک دستور کوچیک در خط فرمان سیستمون کلی کارها، بصورت اتوماتیک انجام بشه و اگر هم، تغییری در فایل ها اعمال کردید اون تغییراتم بصورت اتوماتیک پیاده سازی بشه.

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

نحوه یادگیری Gulp

همونطور که در بالا هم اشاره کردم کار با gulp خیلی سادست اما یک سری پیش نیاز های ساده داره اگر بخواید با Gulp در حد پیشرفته کار کنید باید با جاوا اسکریپت کامل آشنا باشید و همین طور بعدش کار با Nodejs رو یاد بگیرید این موضوع البته برای زمانیه که بخواید Task های پیچیده ای بنویسید و با پلاگین های حرفه ای Gulp کار کنید . پس دو چیز برای شروع کار با Gulp نیازه یکی جاوا اسکریپت و دیگری nodejs . اما اگر میخواید فقط بصورت ساده با Gulp کار کنید همون آشنایی با جاوا اسکریپت کفایت میکنه .

برای یادگیری Gulp میتونید از مقاله های مختلف استفاده کنید یا دوره آموزش Gulp در سایت راکت رو مشاهده کنید که بصورت کامل این ابزار جذاب آموزش داده شده .

نحوه کار با Gulp

همونطور که در قسمت آشنای با Gulp گفتم این ابزار ۴ api اصلی داره که به ترتیب در این قسمت توضیح کوتاهی در مورد هر کدوم میدم بعد از فهمیدن نحوه کار کردن هر ۴ تای اینا شما آماده کار با Gulp میشین و مابقی کارها رو میسپارین به دست پلاگین ها.

Task: این متد به شما برای تعریف یک وظیفه کمک میکنه در اصل با اون میتونید یک کار رو مشخص کنید.

Src: با استفاده از این متد میتونید منبع فایلی که قرار تغییر بر روی اون انجام بشه رو انتخاب کنید.

Dest: این متد برای مشخص کردن محل قرار گیری فایل تغییر داده شده در گالپ مورد استفاده قرار میگیره.

Watch: شما با استفاده از این متد میتونید یک مراقب بر روی فایل هاتون قرار بدید تا اگر تغییری در فایل ها ایجاد شد یک سری وظیفه رو به انجام برسونه.

به همین سادگی بعد از یادگیری کار با این ۴ api میتونید کارتون رو با گالپ شروع کنید .

حرف آخر

اگر نظر شخصی من رو بخواین حتما پیشنهاد میکنم که Gulp رو یاد بگیرید و در کارهاتون ازش استفاده کنید . چون با استفاده از چنین ابزاری میتونید کلی صرفه جویی در وقتتون داشته باشید و یه نکته مهمتر که فراموش کردم در بالا بگم این ابزار خوراکه کارهای تیمیه و به سادگی میتونید مدیریت های مختلفی رو بدونه تداخل در کد ها در کارهای تیمی در gulp انجام بدید امیدوارم حتما کار با Gulp رو شروع کنید و همچنین امیدوارم این مقاله مورد استفاده اتون قرار گرفته باشه.

۰ پاسخ به "اتوماتیک سازی فرانت اند"

    ارسال یک پیغام

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    ارتباط با کافه بلوط

    آدرس : خراسان جنوبی ، بیرجند ، پارک علم وفناوری خراسان جنوبی ، اتاق 101
    آدرس ایمیل: dp.cafebaloot@gamil.com

    logo-samandehi دروازه پرداخت معتبر

    All Right Reserved For Cafe Baloot 2018

    X