Gulp چیست و چه کاربردی دارد؟

دسته بندی: جاوا اسکریپت
سطح مقاله: ساده
زمان مطالعه: 5 دقیقه
۲۰ مهر ۱۳۹۸

امروزه برنامه نویسی فرانت اند و پیاده سازی ظاهر سایت، نسبت به سال‌های اولیه ظهور اینترنت و شبکه جهانی وب (www) تغییرات بسیار زیادی را تجربه کرده است. دیگر کمتر سایتی پیدا می شود که برای برنامه نویسی فرانت اند فقط به HTML و CSS متکی باشد. امروزه تکنولوژی های طراحی و برنامه نویسی رابط کاربری به حدی پیشرفت کرده‌اند که بعضی از برنامه نویسان به طور تخصصی فقط روی یک حوزه مثل FrontEnd کار می کنند. Gulp یکی از همین تکنولوژی های جدید است که توسعه دهنده را از انجام کارهای تکراری و گاهی خسته کننده نجات می دهد. در این مطلب به این موضوع می پردازیم که Gulp چیست و چه کاربردهایی دارد.

فهرست محتوای این مقاله

Gulp چیست ؟

Gulp ابزاری متن باز و رایگان بوده که توسط آقای Eric Schoffstall به زبان جاوا اسکریپت نوشته شده است. گالپ یک Build System یا Task Manager برای محیط Node.Js و پکیج منیجر npm می باشد. از Gulp در برنامه نویسی و توسعه فرانت اند استفاده می شود. به کمک Gulp می توان یک سری کارهای تکراری و زمان‌بر را به صورت خودکار انجام داد. به این ترتیب کار برنامه نویس کمی سبک تر شده و سرعت اجرای پروژه تا حد زیادی بالا می رود.

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

کارهایی مثل فشرده سازی کدها، بهینه سازی، Unit Testing، تبدیل فایل Sass به CSS، ساخت تمپلیت HTML، فشرده کردن تصاویر، ساخت محیط لوکال هاست و غیره به کمک گالپ به ساده ترین شکل ممکن انجام می شوند. کافی است Gulp را نصب کنیم تا این ابزار کارهای این چنینی را برای ما به صورت خودکار (Automate) انجام دهد.

پکیج های Gulp چه هستند و چه کاری انجام می دهند ؟

Gulp برای اجرای Taskهای مختلف از پکیج های کوچک و تک منظوره استفاده می کند و هر بخش کار را یک پکیج انجام می دهد. در حال حاضر Gulp نزدیک به 4000 پکیج مختلف دارد که این عدد مرتب رو به افزایش بوده و ممکن است چند سال بعد بیشتر از این هم بشود. اما این پکیج ها چطور کار می کنند؟

با یک مثال بهتر متوجه نحوه کار این پکیج ها خواهیم شد. فرض کنید برنامه ای به زبان PHP نوشته اید و با خودتان می گویید کاش ابزاری وجود داشت که به طور خودکار کامنت ها یا بخش های اضافه کد را برای من حذف می کرد، با کمال خوشحالی باید بگوییم که چنین ابزاری وجود دارد.

کافی است به کمک Gulp پکیج Gulp-PHP-Minify را نصب کنید تا این ابزار خودش کار را انجام داده و کد PHP شما را تر و تمیز کند. طیف گسترده‌ای از این پکیج ها در مخزن Gulp وجود دارند که هر کدام کار مشخصی انجام می دهند. کافی است با توجه به نیاز خود پکیج های مختلف را به پروژه خود اضافه کنید.

Gulp چه کاربردهایی دارد ؟

همانطور که گفتیم Gulp یک ابزار نوشته شده به زبان جاوا اسکریپت بر پایه Node Stream است که می تواند در طول ساخت و تولید نرم افزار، بسیاری از کارهای رایج را به طور خودکار انجام دهد. با اینکه Gulp رقبایی مثل Broccoli، Grunt و غیره دارد، به خاطر استریم کردن و داشتن سرعت بالا یک سر و گردن بالاتر از رقبایش قرار دارد. به طور کلی با Gulp می توانید کارهای زیر را انجام دهید:

  • فایل ها را به راحتی جا به جا کنید (مثلا از پوشه Project به پوشه Web)
  • فایل ها را به راحتی با هم ادغام کنید
  • نوع فایل ها را تغییر دهید (مثلا تبدیل فایل Less به CSS)
  • فایل ها را بهینه کنید ( شامل فایل های CSS، جاوا اسکریپت، تصاویر و غیره )
  • و ...

چطور Gulp را نصب کنیم ؟

قبل از هر چیزی لازم است که Node Js را روی کامپیوتر خود نصب کنیم. بعد از نصب نود جی اس کافی است با وارد کردن دستور زیر در ترمینال، گالپ را راه اندازی کنیم:

$ sudo npm install gulp -g

دستور بالا به npm می گوید که Gulp را نصب کند و پارامتر -g در آخر خط باعث می شود که npm گالپ را به صورت globall در کل ماشین نصب کند تا از هر جایی که فراخوانی شد در دسترس باشد.

npm install gulp --save-dev

سپس با اجرای دستور بالا، پوشه Gulp در مسیر node_module ساخته می شود. Gulp به حد کافی منعطف است که با هر نوع ساختار فایلی کار کند. می توانیم در فایل gulpfile.js یک Task تعریف کنیم که تمام پیکربندی Gulp را در خود نگه دارد.

چاپ پیغام "Hello World" با Gulp

به عنوان اولین کار دستور زیر را در فایل gulpfile.js قرار دهید:

var gulp = require('gulp');

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

gulp.task('task-name', function() {
 // your code here.
});

همانطور که مشاهده می کنید در قسمت task-name باید نام تسک مد نظر خود را قرار دهیم و در خط بعد کدهای خود را بنویسیم. پس در نهایت کد ما به این شکل در می آید:

gulp.task('hello', function() {
console.log('Welcome to Gulp');
});

حالا برای اجرای Task خود کافی است که دستور زیر را تایپ کنیم تا پیغام "Welcome to Gulp" چاپ شود:

gulp hello

به این ترتیب اولین تجربه کار با Gulp را بدست آوردید.

جمع بندی

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

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

نظرات کاربران

نیما فیض شمس

آیا با وجود webpack نیازی به استفاده از gulp هست ؟! و چه تفاوت هایی با هم دارن ؟!

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل