گالپ gulp js چیست

گالپ چیست؟ گالپ یک build tools میباشد که بر اساس  JAVA SCRIPT  هست و سریع کار شما را برای طراحی  Front end   بیشتر میکنه
پس اگه UI کار هستید یا دوست داری به تکتیک های جدید برنامه نویسی سمت کاربر اشنا شوید این مقاله را بخوانید
Gulp یک FrontEnd Build سیستم است که از آن میتوان برای انجام خودکار کارهای معمول در توسعه وب استفاده کرد. Gulp بر روی nodejs ساخته شده است. خود Gulp و فایلی که شامل کارهایی است که Gulp باید انجام دهد به وسیله JavaScript نوشته شده است. Gulp چهار دستور اصلی دارد: task, src, dest و watch.


    task:  برای ایجاد یک تابع استفاده میشود که این تابع را میتوان بصورت مستقیم اجرا کرد یا به عنوان وابستگی در داخل یک تابع دیگر آنرا صدا زد.
    src: برای باز کردن و برگرداندن محتویات فایل  به عنوان یک stream.
    dest: برای مشخص کردن مسیر ذخیره سازی یک stream به عنوان فایل.
    watch: برای مونیتور کردن تغییرات در یک فایل یا گروهی از فایلها و اجرای یک یا چند task هنگامی که تغییری رخ دهد.

Gulp به خودی خود کار زیادی انجام نمیدهد ولی دارای مجموعه زیادی از پلاگینها است که کارهای اصلی را پلاگینها انجام میدهند.


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


تا چند سال پیش برنامه نویسان وب خیلی به ساختار فرانت اند اهمیت نمی دادند و جاوااسکریپت تنها در حد یکسری افکت و تعاملات 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 بصورت خودکار به پروژه




 گالپ. Gulp هم مانند Grunt مبتنی بر NodeJS است ( اطلاعات بیشتر ). به همین منظور برای نصب ابتدا باید NodeJS را بر روی سیستم خود نصب کنید که خوشبختانه نصب آن بسیار ساده و راحت هست. کافیست به این صفحه رفته و فایل آن را دریافت و آن را بر روی سیستم عامل خود نصب نمائید.

پس از نصب بر روی ویندوز گزینه ای مانند Command Prompt ایجاد می شود که با نام Node.js Command Prompt می توانید آنرا پیدا کنید:

گالپ جی اس
گالپ جی اس


nodejs-command-win

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

پس از بار کردن خط فرمان برای نصب gulp عبارت زیر را وارد نمائید:

npm install -g gulp


گالپ جی اس
گالپ جی اس



nodejs-install-gulp

( در سیستم عامل مک در ابتدای عبارت sudo را فراموش نکنید )

بسته به سرعت اینترنت کمی باید صبر کنید تا Gulp بر روی سیستم شما نصب شود. پس از نصب وارد پوشه ای که می خواهیم در آن از Gulp استفاده کنیم از طریق همین خط فرمان، می شویم و عبارت npm init را وارد می کنیم و به سوالات آن نظیر نام و توضیحات پاسخ می دهیم:

GULP JS
GULP JS


nodejs-init

با انجام این کار در همان پوشه فایلی با نام package.json ایجاد می شود که این فایل شامل اطلاعات مورد نیاز برای NodeJS هست ( اطلاعات بیشتر ).

سپس عبارت npm install –save-dev gulp را وارد نمائید. این کار Gulp را در این پوشه برای شما نصب می کند و عبارت –save-dev نیز باعث می شود در فایل package.json موجود در بخش devDependencies آن عبارت و تنظیمات لازم برای Gulp افزوده شود.

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


من سعی کردم در این نوشته از ورود به جزئیات جلوگیری کنم و به زبان ساده اون رو توضیح بدم. هر کجا سوال یا مشکلی داشتید در قسمت نظرات عنوان کنید تا بیشتر وارد جزئیات بشم.

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

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

3 سال هست در زمینه ی وب فارسی فعالیت دارم. تمرکزم روی برنامه نویسی وب اپلیکیشن  php هست اما گاهی دستی تو طراحی صفحات وب میبرم.

 

وبگاه: Psobhanlo.ir پست الکترونیکی این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

نظر خود را اضافه کنید.

Post comment as a guest

0 محدودیت حروف
متن شما باید بیشتر از 3 حرف باشد
شرایط و قوانین.
نظرات | Add yours
  • هیچ نظری یافت نشد

درباره ی ما

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

حدود 10 نفری هستیم که در این سایت با تخصص های مختلف کار میکنیم. هرکی یه قسمت رو اداره میکنه.
امیدوارم مطالب مفیدی برای شما دوستان داشته باشیم


آخرین پست ها

روزنامه

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