-->
شروع کار با gulp

شروع کار با گالپ (Gulp)

هم‌خوان کنید در:

تلاش برای تسلط بر یک ابزار، بدون آنکه بدانیم واقعاً به چه دردی خواهد خورد یا چه مشکلی را دقیقاً از ما حل می‌کند، کاری بیهوده است. خیلی از ما در طول توسعه نرم‌افزار مجبور به انجام کارهای تکراری بوده‌ایم. کارهایی که ربطی به خلاقیت در توسعه نداشته و اغلب کسل‌کننده و ملالت‌بار هستند. به لیست زیر توجه کنید، احتمالاً برای شما هم آشنا هستند:

  • ساختن و کوچک کاری فایل‌های حجیم کتابخانه‌های جاوا اسکریپت
  • ادغام فایل‌های استایل (css) و ساخت یک فایل از آن‌ها
  • اجرای تک‌تک آزمون‌هایی که برای کد نوشته‌شده‌اند
  • کامپایل فایل‌های دستوری Less/Sass و تولید خروجی مناسب
  • کوچک کاری و درهم‌ریزی کدها
  • تغییر در ابعاد و مشخصات تصاویر
  • نسخه‌برداری از فایل‌های نهایی در یک پوشه دیگر برای ترخیص نهایی
  • به‌روزرسانی شاخص نسخه نرم‌افزار
  • و صدها کار ریز و درشت دیگر

در انتهای هر چرخه‌ی توسعه و در هر بار ترخیص بسته‌ی جدید از نرم‌افزار، همه‌ی کارهای فوق باید تک‌تک انجام شوند! کار تکراری و خسته‌کننده‌ای است! نه؟

اگر کاری هست که از انجام دادنش متنفری [ولی مجبور هستی که انجامش بدی]، خودکارش کن!

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

یکی از این ابزارهای قدرتمند در این زمینه، که امروزه با اقبال توسعه‌دهندگان و برنامه نویسان همراه شده، ابزار Gulp.js است. تفاوت عمده‌ی این ابزار با ابزارهای مشابه مانند Grunt ،Broccoli یا Brunch، وابستگی به Node.js و استفاده از فرآیند زنجیره‌ای pipe آن است. به این مفهوم که ابزار گالپ، امکان زنجیر کردن تکالیف مختلف و نگهداری آن‌ها در حافظه‌ی موقت رایانه را فراهم کرده است. دیگر نیاز نیست نگران تعداد وظایفی که تعریف می‌شوند و یا حجم خواندن و نوشتن بر روی دیسک سخت در هر بار اجرا باشید. این مزیت باعث افزایش سرعت و چابکی پردازش خواهد شد زیرا همه‌ی وظایفِ تعریف‌شده، به‌یک‌باره بر روی حافظه اجرا و در پایان، خروجی بر روی دیسک سخت منتقل می‌شود.

از طرفی همان‌طور که توسعه‌دهندگان این ابزار بیان می کنند، گالپ صرفاً یک taskrunner نیست بلکه یک build system helper است، که به‌خودی‌خود یک مزیت به‌حساب می‌آید.

مبانی و ملزومات ابزار Gulp

به‌منظور بهره‌برداری از ابزار گالپ، به دو فایل package.json و gulpfile.js نیاز خواهیم داشت. قبل از هر چیز نیاز به Node.js دارید، چون Gulp به‌عنوان ماژولی از آن اجرا می‌شود. نصب Node.js بسیار ساده است کافی است به وب‌سایت آن مراجعه کرده و دستورات را دنبال کنید. پس از نصب Node.js و ابزار مدیریت بسته آن (npm)، ترمینال خود را اجرا کرده و دستور زیر را صادر کنید:

دستور فوق به npm می‌گوید که ابزار دستوری گالپ را به‌صورت عمومی (سوئیچ g–) نصب کند.

نکته: بسته‌ی gulp-cli تنها شامل دستوران خط فرمان Gulp است.

مرحله‌ی بعدی ایجاد فایل package.json در ریشه‌ی پوشه‌ی پروژه است. به پوشه‌ی پروژه رفته و دستور زیر را اجرا کنید:

این دستور یک فایل با عنوان package.json و با پیکربندی پیش‌فرض و بدون سؤال (سوئیچ f–)، ایجاد می‌کند:

اگر دستور init را بدون سوئیچ f– اجرا کنید، سؤالاتی مربوط به پروژه برای پر کردن فایل package.json از شما پرسیده خواهد شد که می‌توانید آن‌ها را مطابق میل تغییر دهید تا درنهایت درون فایل نوشته شوند.

فایل package.json قابلیت پیکربندیِ وابستگی‌ها و تنظیم عمومی پروژه را در اختیار شما قرار می‌دهد که درنهایت برای اجرا صحیح پروژه، توسط npm مورداستفاده قرار خواهد گرفت. این فایل تضمین خواهد کرد که پروژه‌ی شما همواره شامل ابزارها و فایل‌های لازم برای اجرای صحیحش باشد.

پس‌ازآن لازم است که گالپ را به‌عنوان یک وابستگی جدید در پروژه‌ی خود نصب و پیکربندی کنید. شاید سؤال کنید که مگر قبل‌تر این کار را انجام نداده‌ایم؟ بله، قبل از این ابزار gulp-cli را نصب‌کرده‌اید تا بتوانید از دستورات خط فرمان آن به صورت عمومی استفاده کنید. ولی اگر بخواهید تکالیفی را در سطح پروژه بر عهده‌ی این ابزار قرار دهید باید آن را به‌عنوان یک ابزار وابسته به پروژه معرفی و پیکربندی کنید تا در تمام مراحل همراه پروژه‌ی شما باشد. به‌عبارت‌دیگر با این کار پروژه‌ی خود را برای اجرای موفق به این ابزارها وابسته می‌کنید که بدون آن‌ها پروژه یا به‌طورکلی کار نمی‌کند یا به‌صورت ناقص عملیاتی خواهد شد.

بسته‌ی گالپ دارای دو بخش است. بخشِ دستورات خط فرمان برای اجرای فرمان‌های داخلی و بخشِ توابع جاوا اسکریپت که درون پروژه و برای اجرای تکالیف و پیکربندی‌های ویژه از آن‌ها استفاده می‌کنید. توسعه‌دهندگان گالپ برای تفکیک این دو بخش و افزایش بهره‌وری بخش اول یعنی دستوراتِ عمومیِ خط فرمان گالپ را در بسته‌ای مجزا به نام gulp-cli که به آن Gulp Command Line Interface می‌گویند، فراهم آورده‌اند.

برای این منظور، درحالی‌که همچنان در پوشه‌ی اصلی پروژه هستید، دستور زیر را صادر کنید:

این دستور، ابزار گالپ را در بخش وابستگی‌های فنی فایل package.json ثبت کرده (سوئیچ save-dev––) و فایل‌های موردنیاز را در پوشه‌ای با عنوان node_modules، دانلود و ذخیره می‌کند. این کار سطح توزیع‌پذیری پروژه‌ را بالا خواهد برد به این شکل که کافی است پوشه‌ی اصلی را به ماشین دیگری منتقل کنید، تمام ملزوماتِ کار، همراه پروژه خواهند بود.

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

  1. تمام فایل‌های جاوا اسکریپتِ ایجادشده باهم یکی شوند.
  2. فایل نهایی کوچک‌سازی شود.
  3. فایل خروجی در پوشه‌ی دیگری و با عنوان جدید ذخیره شود.
  4. با هر بار تغییر در هر یک از فایل‌ها، تکالیف فوق دوباره و به‌صورت خودکار انجام شوند.

مرحله‌ی بعدی نصب افزونه‌هایی است که انتظارات فوق را تأمین کنند. به‌منظور اجرای تکالیف ۱و ۲ به دو افزونه‌ی gulp-concat، gulp-minify نیاز داریم. دستور زیر هر دو افزونهرا برایتان یکجا نصب خواهد کرد:

فایل package.json چیزی شبیه این خواهد بود:

همان‌طور که مشاهده می‌کنید، در فایل package.json به تمام ابزارهایی که لازم داریم اشاره ‌شده است. نکته جالب این است که اگر پروژه‌ی خود را در اختیار کس دیگری قرار دهید یا بر روی ماشین دیگری منتقل کنید، با اجرای دستور npm install تمامی ملزومات پیکربندی‌شده در این فایل مجدداً نصب‌شده و قابل‌استفاده خواهند بود. قابلیتی که در مواقع دست‌به‌دست شدن پروژه بین توسعه‌دهندگان مختلف بسیار حائز اهمیت و طلایی است.

تعریف تکالیف در فایل gulpfile.js

این فایل، قلب تپنده‌ی فرآیند ساخت پروژه با گالپ است. جایی که تکالیف مورد انتظار را تعریف و پیکربندی می‌کنیم. ابزار گالپ درنهایت این فایل را فراخوانی و دستورات موجود در آن را اجرا خواهد کرد. فایل gulpfile.js را در ریشه‌ی پوشه‌ی پروژه ایجاد کرده و خطوط زیر را به آن اضافه کنید:

کدهای فوق (که به زبان جاوا اسکریپت نوشته‌شده‌اند) ، دستورات پایه برای تعریف تکالیف بعدی است. خط اول، ماژول گالپ را برای کارهای عمومی در اختیارمان قرار می‌دهد. خطوط بعدی نمایانگر یک تکلیف پیش‌فرض است که شروع فرآیند ساخت را کلید می‌زند. تکلیف default تکلیفی است که به‌صورت نقطه‌ی آغاز توسط Gulp شناسایی و اجرا خواهد شد. به آن به چشم یک تابع main که در هنگام فراخوانی یک برنامه اجرا می‌شود بنگرید.

قبل از اینکه تکالیف موردنظرمان را ایجاد کنیم، دستور gulp را در پوشه‌ی ریشه‌ی پروژه اجرا کنید. باید با پیامی مبنی بر موفقیت در اجرای دستورات مواجه شوید:

کدهای زیر را  با کدهای قبلی در فایل gulpfile.js جایگزین کنید:

اگر به نظرتان کمی پیچیده می‌آید، نگران نباشید به خواندن ادامه دهید. به‌زودی همه‌ی آن‌ها را درک خواهید کرد.

هر تکلیف با فراخوانی متد task از شیء gulp ایجاد می‌شود. این متد سه ورودی می‌گیرد.

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

تعریف و اختصاص توابع از قواعد شیرین جاوا اسکریپت پیروی می‌کند. هر سه حالت زیر معتبر هستند:

دست‌کم در هنگام کار با گالپ، ترجیح می‌دهم از حالت سوم استفاده کنم! زیرا اجازه می‌دهد که فایلِ تر و تمیزتری داشته باشم و ترتیب تعریف توابع را آزادانه تغییر دهم. علاوه بر این، تعریف تکالیف پیچیده و توابع اشتراکی در این حالت راحت‌تر خواهد بود.

درصورتی‌که تکلیف موردنظر به تکالیف دیگر وابسته باشد، عنوان آن تکالیف را درون یک آرایه قرار داده و در پارامتر دوم به تابع task ارسال می‌کنیم. به تکلیف default در خط ۱۲ دقت کنید. یک تکلیف پیش‌فرضِ صامت (بدون تابع اجرایی) که تکالیف js و watch ،که قبل‌تر ایجادشده‌اند را اجرا می‌کند. باید توجه داشت که ترتیب قرارگیری تکالیف در آرایه تأثیری در تقدم و تأخر اجرای آن‌ها ندارد. همه‌ی تکالیف موجود در آرایه یکباره و به صورت موازی اجرا خواهند شد. اگر عنصر دوم یک تابع باشد، در هنگام فراخوانیِ تکلیف، اجرا خواهد شد. درون تابع هر چیزی را می‌توانید تعریف کنید. هر منطقی که مایلید درون تابع قابل پیاده‌سازی است. اجازه دهید به کد قبل بازگشته و درون این توابع را دقیق‌تر بررسی کنیم. سه خط اول ماژول‌هایی که نصب‌کرده بودیم را برای استفاده‌های بعدی، مهیا می‌کنید.

در بخش بعدی، تکلیفی با عنوان js ساخته شد و تابع jsTask را به آن متصل کردیم. درون تابع مذکور، متد src ، هرچه فایل با پسوند js در پوشه‌ی /js/ و همه‌ی زیرشاخه‌های آن پیدا کند را به‌عنوان منبع در خود حفظ می‌کند. خط بعدی تابع concat را به‌عنوان حلقه‌ی بعدی به زنجیر متصل می‌کند. این تابع نام فایلی که باید پس از چسباندن فایل‌ها بسازد را (all.js) در ورودی اخذ می‌کند. خط بعدی دستور minify که فایل یکپارچه‌شده را کوچک‌سازی می‌کند را صادر می‌کند و درنهایت خط بعدی به Gulp می‌گوید که فایل‌های ایجادشده‌ی نهایی را به کجا (/dest/js) منتقل کند. دقت کنید تا زمانی که دستور gulp.dest را اجرا نکرده‌ایم هیچ خروجی بر روی دیسک نخواهیم داشت. انتظارات شماره‌ی ۱، ۲ و ۳ در این تکلیف مرتفع شدند.

یک مورد دیگر باقی‌مانده است. اینکه تمام فرآیندهای فوق در هر بار تغییر در فایل‌های مبدأ به‌صورت خودکار تکرار شوند. تکلیف بعدی با عنوان watch همین کار را انجام می‌دهد. درون تابع این تکلیف از متد gulp.watch استفاده‌شده که دو پارامتر می‌گیرد.

  • مسیر فایل‌هایی که قرار است رصد شوند.
  • آرایه‌ای از تکالیف که باید به‌محض تغییر در هر یک فایل‌های مبدأ اجرا شوند.

پارامتر اول را بر روی src/**/*.js تنظیم کردیم چون قرار است تمام فایل‌های جاوا اسکریپت موجود در شاخه‌ی src و زیرشاخه‌های آن را در بربگیرد. پارامتر دوم هم یک آرایه‌ی تک عنصری است که عنوان تکلیف از پیش تعریف‌شده‌ی js در آن قرار دارد. به این مفهوم که هر وقت تغییری در هر یک از فایل‌های جاوا اسکریپت موجود در آن پوشه صورت گرفت، تکلیف مربوط به چسباندن، کوچک کردن و انتقال را به‌صورت خودکار اجرا کن!

در انتها باید تکلیف default را از وجود تکالیفی که ایجاد کرده‌ایم آگاه کنیم. خط ۱۲ این کار را برای ما انجام می‌دهد. وقتی دستور gulp را در ترمینال اجرا کنید، تکلیف default، تکلیف js و تکلیف watch را اجرا خواهد کرد به این مفهوم که تمام فایل‌های جاوا اسکریپت موجود در پوشه src فشرده‌ و کوچک‌سازی شده و در قالب دو فایل all.js و all-min.js به پوشه‌ی dest/js کپی می‌شوند و ابزار گالپ در یک وضعیت انتظار به‌منظور رصد تغییرات در فایل‌ها، باقی خواهد ماند تا با هر بار تغییر، مجدداً تکالیف خود را انجام دهد. امتحان کنید:

می‌توانید هریک از تکالیف تعریف‌شده را به‌صورت مستقل هم اجرا کنید:

اطلاعات بیشتر و پیوند به بیرون

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


هم‌خوان کنید در:
سهیل صمدزاده

سهیل صمدزاده

من سهیل صمدزاده؛ مشاور و مربی چابک‌سازی، توسعه‌دهنده، مدیر محصول نرم‌افزاری و وبلاگ نویس هستم. به مباحث چابک در توسعه محصول علاقه‌مندم و سعی می‌کنم در اینجا خُرده دانش‌هایم را با شما به اشتراک بگذارم.


دیدگاه‌های شما ارزشمند‌اند...

اولین نفری باشید که دیدگاه می‌گذارد.

خبر بده وقتی
avatar
1024

وی‌پی‌دیسکاز

به کانال تلگرام آیلِتـــ بپیوندید!

t_logo

آیلِتـــ هر ماه در صندوق ایمیل شما: