GULP چیست و چه ویژگی هایی دارد؟

وقتی که به گذشته فکر می کنم که چطور بخش front-end با back-end اپلیکیشن های تحت وب آمیخته بود با خودم می گویم که چقدر بهینه کردن و تولید نسخه های deploy از کدهای فرانت سخت بود. اکثر برنامه نویسان به اینکه چقدر بهینه کردن خروجی برنامه برای مرورگرها مهم است اهمیت چندانی نمی دادند ولی حداقل من بخاطر وسواسی که در این مورد داشتم این مساله اهمیت زیادی برایم داشت. برنامه نویسان و تیم های حرفه ای front-end مدتهاست که به این نتیجه رسیده اند که جاوااسکریپت و html هم برای اینکه قابلیت توسعه بالایی داشته باشد و چند نفر بصورت همزمان بتوانند بر روی پروژه کار کنند باید همانند دیگر زبان های برنامه نویسی، یک ساختار منظم و فریم ورک برای آن ایجاد کنند.

تا چند سال پیش برنامه نویسان وب خیلی به ساختار فرانت اند اهمیت نمی دادند و جاوااسکریپت تنها در حد یکسری افکت و تعاملات ui ابتدایی برایشان اهمیت داشت اما از وقتی که node.js متولد شد توسعه دهندگان بسیاری در سراسر جهان به طرز عجبی به سمت جاوااسکریپت کشیده شدند. هزاران پروژه جاوااسکریپت بصورت متن باز بوجود آمد، تا جایی که جاوااسکریپت از منظر های مختلفی محبوب ترین زبان برنامه نویسی دنیا شد.

توسعه دهندگان کم کم متوجه شدند که برای رسیدگی بهتر و پیشرفت سریعتر برنامه های جاوااسکرپتی باید ساختار و قواعد مشخصی تعریف کنند و این یعنی تعداد پوشه ها و فایل های بیشتر، تعداد خطوط کامنت بی شمار و خورد شدن فایل های html, js و css به تعداد زیاد. ولی یک اپلیکیشن جاوااسکریپتی بر روی مرورگر اجرا می شود و در بیشتر مواقع قرار است از وب دانلود شود و تعداد زیاد فایل ها و فشرده نبودن آنها یعنی تعداد request های بالا و حجم زیاد کد که نتیجه آن سرعت پایین و لگ زدن وب سایت می شد.

این ماجرا طرف دیگری هم دارد! توسعه دهندگان باید از روش هایی استفاده کنند که کد کمتر و البته قابل فهم تری بنویسند و یا از متدهای جدیدتری استفاده کنند ولی هزاران دلیل وجود دارد که مرورگرها نمی توانند هم پای توسعه دهندگان خود را بروزرسانی کنند، پس باید راهکاری ارائه می شد! البته نیاز دیگری که بشدت کمبود آن احساس می شد، debug برنامه های front-end و جدا کردن محیط های تست و توسعه و deploy بود که در دیگر پلتفرم های نرم افزاری پیش بینی شده بودند.

Task Runner ها

شرکت های بزرگ برای بهینه کردن و تولید نسخه های deploy برای اپلیکیشن های تحت وب خود معمولا راهکار های خودشان را استفاده می کردند ولی در نهایت همه توسعه دهندگان به یک سری راهکار هایی نیاز داشتند که در بین برنامه نویسان یکسان سازی شود و همین نیاز باعث شد ابزارهایی مانند Gulp , Grunt و broccoli بدون رابط کاربری و prepros و codekit  با رابط کاربری بوجود آیند که با عنوان task runner در بین توسعه دهندگان به شهرت رسیدند.

task runner ها قادرند که در محیط توسعه نرم افزار وظایف مشخصی در شرایط معین شده اجرا کنند. به عنوان مثال ممکن است شما از پیش پردازشگری مانند sass و یا less استفاده کنید و این ابزار صرفا برای محیط توسعه کاربرد دارد و در نسخه deploy حتما باید توسط کامپایلر آن یک خروجی css ایجاد کنید تا برای مرورگرها قابل فهم باشد در اینجا task runner ها به کمک شما می آیند و بصورت خودکار در زمان ایجاد نسخه deploy این عملیات را انجام داده و آدرس فایل های scss را با css تولید شده توسط خودش تغییر می دهد. البته هیچ یک از این عملیات بصورت پیشفرض صورت نمی گیرد و برنامه نویس باید بر اساس نیاز کدهای مربوطه را در فایل اجرای task runner نوشته و یا از پلاگین های آنها استفاده نماید.

چرا GULP؟

ابزارهایی مانند گالپ عمدتا با نام build tools هم شناخته می شوند چرا که ماهیت کار آنها شبیه نرم افزار های build  می باشد و task هایی را اجرا می کنند که به build منجر می شود.

در اینجا هیچ چالشی سر اینکه Gulp یا Grunt را انتخاب کنیم وجود ندارد، برنامه نویس یا تیم توسعه باید بر اساس نیاز و اینکه با سبک کار کدامیک از این دو ابزار راحت هستند یکی را انتخاب نموده و با آن ادامه دهد. انتخاب بدی وجود ندارد و انتخاب یکی به جای دیگری خانمان سوز نخواهد بود.

به عنوان مثال در bootstrap, jquery ، angular و react از گرانت استفاد شده و typescript، angular material, angular2 گالپ را انتخاب کرده اند.

چه کارهایی با task runner ها امکان پذیر است؟

گالپ از یک روش زنجیره پردازشی به اسم پایپ لاین (pipeline) استفاده می کند، پس از انتخاب فایل هایی که می خواهید بر روی آنها عملیات انجام دهید، ماژول های مورد نظرتان را در لوله جریان فایل ها تزریق می کنید و هر ماژول در زمان تزریق تغییرات خود را اعمال نموده و تحویل ماژول دیگر می دهد.

اگر وارد وب سایت گالپ شوید خواهید دید که حدودا ۲۷۰۰ پلاگین برای آن نوشته شده و تقریبا هر تسک و عملیاتی که تصورش را بکنید می توانید پلاگینی برای آن پیدا کنید.

مهم ترین کاربردها:

  • فشرده کردن فایل های js و css و ذخیره آنها در یک فایل واحد
  • تهیه نسخه GZIP از همه ی فایل های استاتیک
  • استفاده از Browser Sync: با این ماژول می توانید تغییرات در برنامه را بصورت لحظه ای در مرورگرها مشاهده کنید
  • بیلد های مختلف برای نسخه های deploy و development
  • اعمال تنظیمات مخصوص نسخه deploy و development
  • فشرده کردن محتوای فایل های html
  • حذف کامنت ها در نسخه deploy
  • uglify کردن کدهای جاوااسکریپن برای ناخوانا کردن کدها در نسخه deploy
  • تغییر اسم فایل ها در نسخه deploy
  • تولید فایل map برای فایل های css و js
  • کامپایل preprocessor ها
  • افزودن فایل های پکیج های bower بصورت خودکار به پروژه

چرا CLI؟

plumbin-pipelines-a-gulpjs-workshop-22-638

در بالا اشاره کردم که ابزارهایی مثل  prepros و codekit  هم وجود دارند که با رابط کاربری ارائه شده اند، اما اگر شما هم مثل من کاربر لینوکس باشید بخوبی می دانید که نرم افزارهای GUI هیچوقت به گرد پای نرم افزارهای CLI هم نمی رسند چرا که ابزارهای cli دارای قدرت و انعطاف پذیری بالایی هستند چون توسعه دهندگان آنها بدون هر گونه نگرانی از مشکلات رابط کاربری، به منطق و عملکرد صحیح نرم افزارشان تمرکز کرده اند. تنها مشکل ابزارهای CLI این است که تنظیم آنها کمی پیچیده و کسل کننده است.

گالپ نیز همانند بسیاری از ابزارهای مفیدی که در توسعه وب سایت ها و اپلیکیشن های تحت وب استفاده می شود با جاوااسکریپت نوشته شده و توسط node.js اجرا می شود.

نصب و راه اندازی

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

برای استفاده از گالپ پیشنهاد می کنم مقاله زیر را از سایت css-tricks.com مطالعه کنید:

Gulp for Beginners

3 دیدگاه برای «GULP چیست و چه ویژگی هایی دارد؟»

پاسخ دهید

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