سلام خدمت همه ای کاربرهای راکت ، این یک مقاله اختصاصی از وبسایت راکت است ، امیدوارم مورد استفاده اتون قرار بگیره و بیشتر با زبان محاوره ای سعی به نوشتن این مقاله کردم اگر مشکلی از این بابت وجود داشت از دوستان عذرخواهی میکنم . در این مقاله قرار در مورد GulpJs صحبت کنم . شاید بدونید چیه ، شایدم ندونید مهم اینکه اخر این مقاله میفهمید که این چه ابزاریه . بزارید از اونجای شروع کنم که اصلا حس میکنیم باید چیزی وجود داشته باشه که کارهامون رو اتوماتیک سازی کنه .
شروع حس نیاز
من مدت زیادیه که مشغول طراحی وب و انجام کد نویسی های سمت کلاینت هستم و در طول این مسیر تجربه های زیادی به دست آوردم . برای مثال قبل از استفاده از gulpJs من برای فشرده سازی فایل های js و css و html همیشه کدهاشون رو از طریق سایت های مختلف فشرده سازی میکردم میدونید این یعنی چی ؟ این یعنی اینکه اگر هر تغییری دادید باید دوباره کدتون رو ببرید داخل مرورگر ، داخل سایت مورد نظر و دوباره عملیات فشرده سازی رو انجام میدادید . اصلا بزارید بگم چرا فشرده سازی ؟ بخاطر کم شدن حجم فایل ها و افزایش سرعت لود وبسایت ها این خیلی مهمه خیلیییی . پس اینم یه نکته از طرف من :D . حالا فشرده سازی فقط یکی از هزاران کاری هست که میتونید انجام بدید . کارایی مثل الحاق فایل ها ، Sync کردن ویرایشگرتون با مرورگر ، انواع کامپایل های مختلف در کدهاتون و اصلا هر کاری که فکرشو کنید . باور کنید خیلی از این کارها رو حتی نمی دونستم خیلی ساده با یه ابزار قابل انجامه و همیشه کمبود چنین ابزاری رو در پروژه هام احساس میکردم . تا زمانی که با GulpJs آشنا شدم .
آشنایی با Gulp
حالا که فهمیدیم چه دلایلی برای کار با Gulp وجود داره . بزارید در مورد شروع کار با Gulp صحبت کنم . خود Gulp خیلی ساده اس ، چهار کار اصلی یا بهتر بگم ، چهار Api اصلی داره که سعی میکنم در مورد هر چهارتاشون در همین مقاله یه توضیح کوتاه بدم . تمام Gulp با همین 4 api اصلی بنا شده . بترتیب اسم این متد ها Task ، src , dest و watch هست . Gulp با فلسفه Task Runner ها وارد کار شد یعنی اینکه شما بیاید کارهای تعریف کنید که با اجرا کردنش حالا چه بصورت دستی یا اتوماتیک یک سری وظایف انجام بشه . وظایفی مثل کامپایل فایل های css و الحاق فایل های مختلف ، انالیزکردن کد ها و هزاران کار دیگه .
خب داستان از این قراره که در چند مدت پیش بدلیل چالش های مختلف ، افراد زیادی تمایل نداشتن که با استفاده از جاوا اسکریپ چنین ابزارهای برای انجام چنین کارهای رو ایجاد کنند . اما خلاصه بگم وقتی NodeJs وارد کار شد داستان متفاوت شد هزاران هزار نفر هر روز براش پلاگین مینویسن و هر روز هزاران هزار نفر جدید به سمتش کشده میشن بخاطر کارهای جالبی که میشه باهاش انجام داد . اولین ابزاری که با فلسفه Task Runner بوجود اومد Grunt بود و با اومدنش کارها رو متحول کرد بصورتی که خیلی خیلی از کارهای که یک برنامه نویس سمت Front-end باید انجام میداد رو به حداقل خودش رسوند .
حالا بخاطر یک سری دلایلی که من در دوره GulpJs در سایت گفتم و شما هم میتونید خیلی راحت با مشاهده قسمت مقایسه gulp ، grunt ، webpack این دلایل رو بفهمید . با اومدن GulpJs کار کردن با اون رو ترجیح میدم . یکی از دلایلش Stream Base بودن Gulp هست . خلاصه تر بگم اگر عاشق جاوا اسکریپت و nodejs هستید قطعا Gulp براتون عالی تره و با کدنویسی داخل اون راحتر خواهید بود . فرض کنید با تعریف Task های مختلف و با وارد کردن یک دستور کوچیک در خط فرمان سیستمون کلی کارها ، بصورت اتوماتیک انجام بشه و اگر هم ، تغییری در فایل ها اعمال کردید اون تغییراتم بصورت اتوماتیک پیاده سازی بشه . البته این موضوع رو هم بگم که لازم نیست تمام عملیات مثلا کامپایل رو خودتون بنویسید چون یکی از ویژگی های چنین ابزاری داشتن پلاگین های زیاده در حد چند هزار پلاگین . حالا کدوم Front-end کاری رو میشناسید که بگه من چنین چیزی رو نمیخوام و میخوام بصورت دستی انجام بدم . اگه چنین شخصی دیدین اون حتما دیوانست شک نکنید .
نحوه یادگیری Gulp
همونطور که در بالا هم اشاره کردم کار با gulp خیلی سادست اما یک سری پیش نیاز های ساده داره اگر بخواید با Gulp در حد پیشرفته کار کنید باید با جاوا اسکریپت کامل آشنا باشید و همین طور بعدش کار با Nodejs رو یاد بگیرید این موضوع البته برای زمانیه که بخواید Task های پیچیده ای بنویسید و با پلاگین های حرفه ای Gulp کار کنید . پس دو چیز برای شروع کار با Gulp نیازه یکی جاوا اسکریپت و دیگری nodejs . اما اگر میخواید فقط بصورت ساده با Gulp کار کنید همون آشنایی با جاوا اسکریپت کفایت میکنه .
برای یادگیری Gulp میتونید از مقاله های مختلف استفاده کنید یا دوره آموزش Gulp در سایت راکت رو مشاهده کنید که بصورت کامل این ابزار جذاب آموزش داده شده .
نحوه کار با Gulp
همونطور که در قسمت آشنای با Gulp گفتم این ابزار 4 api اصلی داره که به ترتیب در این قسمت توضیح کوتاهی در مورد هر کدوم میدم بعد از فهمیدن نحوه کار کردن هر 4 تای اینا شما آماده کار با Gulp میشین و مابقی کارها رو میسپارین به دست پلاگین ها .
Task : این متد به شما برای تعریف یک وظیفه کمک میکنه در اصل با اون میتونید یک کار رو مشخص کنید .
Src : با استفاده از این متد میتونید منبع فایلی که قرار تغییر بر روی اون انجام بشه رو انتخاب کنید .
Dest : این متد برای مشخص کردن محل قرار گیری فایل تغییر داده شده در گالپ مورد استفاده قرار میگیره .
Watch : شما با استفاده از این متد میتونید یک مراقب بر روی فایل هاتون قرار بدید تا اگر تغییری در فایل ها ایجاد شد یک سری وظیفه رو به انجام برسونه .
به همین سادگی بعد از یادگیری کار با این 4 api میتونید کارتون رو با گالپ شروع کنید .
حرف آخر
اگر نظر شخصی من رو بخواین حتما پیشنهاد میکنم که Gulp رو یاد بگیرید و در کارهاتون ازش استفاده کنید . چون با استفاده از چنین ابزاری میتونید کلی صرفه جویی در وقتتون داشته باشید و یه نکته مهمتر که فراموش کردم در بالا بگم این ابزار خوراکه کارهای تیمیه و به سادگی میتونید مدیریت های مختلفی رو بدونه تداخل در کد ها در کارهای تیمی در gulp انجام بدید امیدوارم حتما کار با Gulp رو شروع کنید و همچنین امیدوارم این مقاله مورد استفاده اتون قرار گرفته باشه .
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید