معرفی پلاگین GulpJS

1398/01/20
در این بلاگ پلاگین GulpJS معرفی می‌شود که به ساده‌تر شدن مدیریت پروژه‌های طراحی وب کمک می‌کند.
1_vPmAHiZx-ffB_3UmBlMPrA.png

GulpJS یک پلاگین برای مدیریت کردن فایل‌های جاوااسکریپت و CSS است که با استفاده از NodeJS نوشته شده است. بنابراین برای نصب گالپ نیاز داریم NodeJS را در سیستم داشته باشیم. 

GulpJS خود دارای پلاگین‌های مختلفی است که کار اصلی آن استفاده از همین پلاگین‌ها است. این پلاگین‌ها برای اتوماتیک کردن کارهایی مثل فشرده سازی فایل‌های اسکریپتی و css، الحاق کردن فایل‌های مختلف، تغییر نام، دیباگ کردن و آنالیز کردن کدها جهت بررسی اشکالات احتمالی و خیلی کارهای دیگر استفاده می‌شود که کمک می‌کند کارها را مدیریت شده‌تر انجام دهیم. در واقع Gulp کمک می‌کند تمرکز اصلی ما روی توسعه باشد و وقت صرف کارهای تکراری نشود.

برای مثال بدون چنین ابزاری برای فشرده سازی یک فایل css باید وارد  سایت‌هایی که به صورت آنلاین این کار را انجام می‌دهند ‌شویم، کدها را کپی کرده، و optimize شده آن را بگیریم و در یک فایل دیگر ذخیره کنیم. این کار زمان زیادی را تلف می‌کند و همچنین پر دردسر است، و در صورت تغییر فایل css، تمام این مراحل دوباره باید انجام شود. Gulp برای اتومات کردن اینگونه کارها کمک بسیاری به ما می‌کند.

یا فرض کنید 10 تا فایل جاوا اسکریپت داریم اما هنگام لود کردن در وبسایت نمیخواهیم 10 تا درخواست به سرور بفرستیم. برای این کار بهتر است هر 10 تا فایل روی یک فایل الحاق شود، و به جای 10 درخواست تنها یک درخواست به سرور ارسال شود. این کار را به راحتی با Gulp می‌توان انجام داد.

یا کارهایی مثل تغییر نام فایل‌ها، تولید کردن نسخه‌های مختلف پروژه در کنار داشتن سورس اصلی، به شکلی که در صورت تنها تغییر یک خط کد، به سادگی یک نسخه نهایی ایجاد کند. همه این کارها به صورت اتوماتیک با تنها وارد کردن یک دستور خط کد در آخر کار انجام شود. در واقع با استفاده از Gulp یکسری taskها همانند کارهایی که در بالا گفته شد تعریف می‌شود. گالپ کمک می‌کند تا یک پروژه به سادگی مدیریت شود، و افراد مختلف یک تیم بتوانند تغییرات خود را بدون مشکل روی پروژه اعمال کنند و نسخه اصلی را نگه دارند.


بررسی ابزارهای مشابه

برای تعریف کردن task و اتوماتیک کردن کارها در پروژه‌ها 3 ابزار مطرح وجود دارد:
 
  • GruntJS
  • GulpJS
  • Webpack

‏Grunt، مبتنی بر فایل است. به این صورت که ابتدا باید کاملا فایل خوانده شود، سپس تسک‌های مورد نظر ‌انجام می‌شوند. یعنی اگر 10 تسک داشته باشیم، 10 بار باید فایل‌ها کامل خوانده شوند بعد کارها انجام شوند. همین موضوع سرعت Grunt را تا حدی پایین می آورد. در صورتی که در Gulp اینگونه نیست، و همچنین علاوه بر ساده تر بودن Syntax، مبتنی بر stream است.

برای درک بهتر تفاوت مبتنی بر فایل و stream می توان یوتیوب را مثال زد. اگر برای دیدن یک ویدیو مجبور باشیم صبر کنیم تا کل آن دانلود شود، به آن مبتنی بر فایل گفته می‌شود. اما در یوتیوب به محض دانلود شدن بخشی از ویدیو، شروع به پخش می‌کند که به آن مبتنی بر stream گفته می‌شود.

‏یکی از نکات مثبت Gulp نسبت به Grunt، همین مبتنی بر stream بودن آن است که سرعت را بالاتر می‌برد.
Grunt به علت قدیمی‌تر بودن، پلاگین‌های بیشتری (تقریبا 6000 تا) دارد، اما تعداد پلاگین‌های Gulp نیز زیاد است (تقریبا 4000 تا)، و کمبودی در آن‌ها دیده نمی‌شود.

Webpack یک سیستم ماژولار است. کار Webpack تنها تعریف کردن تسک نیست و هدف اصلی آن ماژولار بندی پروژه‌هاست، که خیلی هم کاربردی است. اما تمرکز اصلی آن روی اتوماتیک کردن کارها نیست، و Syntax پیچیده‌تری برای این کار دارد. بنابراین Gulp و Grunt برای این کار انتخاب بهتری هستند.

تعریف Task در Gulp

برای تعریف کارها در Gulp به صورت زیر ابتدا Gulp را در پروژه به صورت local فراخوانی کرده و با استفاده از دستور task، نام کار را تعیین کرده و عملیاتی که می‌خواهیم در این کار تعریف شود را به صورت تابع در ورودی تعریف می‌کنیم. سپس با استفاده از دستور gulp task در cmd ویندوز یا در ترمینال لینوکس، task مورد نظر را اجرا می‌کنیم.

Capture.PNG

دستور زیر یک کار با نام copy ایجاد کرده، که در آن دستور gulp.src تمامی محتویات پوشه development را انتخاب می‌کند و سپس توسط دستور pipe برای اعمال دستور بعدی منتقل می‌شود و فایل انتخابی را در پوشه‌ای به نام production کپی می‌کند. در واقع انتقال دستورات در گالپ از طریق دستور pipe صورت می‌گیرد.

Capture-(2).PNG

برای تعیین توالی کارها در Gulp، نام کاری که می‌خواهیم قبل از کار مورد نظر حتما انجام شود، به عنوان ورودی دوم به آن داده می‌شود. برای مثال در دستور زیر، با اجرای کار dependenttask، ابتدا کار mytask انجام شده، و سپس دستوراتی که داخل خود dependenttask وجود دارند اجرا خواهند شد.

pic.png

برای کار با less ابتدا نیاز است پکیج آن را نصب کنیم، که به سادگی با دستور زیر انجام می‌شود.

Capture-(6).PNG

سپس در یک کار با نام less، تمام فایل‌هایی که پسوند less. دارند انتخاب شده، و به تابع less منتقل می‌شوند، و در انتها خروجی در پوشه‌ای به نام public ذخیره می‌شود.

Capture-(3).PNGCapture-(4).PNG

اینکه پس از هر بار تغییر در فایل مورد نظر، مجبور باشیم یک بار کار تعریف شده در Gulp را اجرا کنیم زمانبر است، و مانع اتومات شدن کارها می‌شود. دستور watch می‌تواند بر فایل‌های مورد نظر ما نظارت کند، تا پس از هر گونه تغییری در آن‌ها، کار مورد نظر به طور اتوماتیک انجام شود. به عنوان مثال در دستور زیر، به محض ایجاد تغییر روی هر فایلی که پسوند less. داشته باشد، سناریوی less اجرا خواهد شد.

Capture-(5).PNG

Gulp دارای پلاگین‌های بسیار متنوعی است که مانند دستوراتی که در این بلاگ گفته شد، با اتوماتیک کردن کارها و افزایش سرعت انجام پروژه، می‌تواند به مدیریت هر چه بهتر آن کمک کند، بنابراین استفاده از آن در پروژه‌های طراحی وب بسیار توصیه می‌شود.
 
User Avatar
نویسنده : نیلوفر صمدزاده
امتیاز شما :

دیدگاه کاربران



ارسال پیام



 Security code