امروزه برنامه نویسی فرانت اند و پیاده سازی ظاهر سایت، نسبت به سال‌های اولیه ظهور اینترنت و شبکه جهانی وب (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 را بدست آوردید.