مقایسه WebPack و Gulp و Grunt و Browserify

در اوایل محبوبیت زبان برنامه نویسی جاوا اسکرپیت، کسی فکرش را هم نمی کرد که بتوان توسط javascript ابزارهای قدرتمندی مانند Gulp و Webpack را توسعه داد. اما با گذشت زمان و پیشرفته تر شدن اپلیکیشن های جاوا اسکرپیتی، کارایی، سرعت و امنیت اپلیکیشن ها بیش از قبل اهمیت پیدا کرد و همین قضیه زمینه ساز توسعه ابزارهای مذکور شد.

در این روزها، تولید اپلیکیشن های تجاری و با مقیاس بزرگ بدون استفاده از ابزارهای اتومات سازی تسک ها مانند گالپ، گرانت و وب پک امکان پذیر نمی باشد. این ابزارها در تسریع و تسهیل کارهای روتین توسعه اپلیکیشن مانند فشرده سازی کدهای js و css، بهینه سازی تصاویر بسیار کمک کننده هستند.

در این مقاله می خواهیم ابزارهای Grunt-Gulp-Browserify-WebPack را معرفی کنیم و کاربرد هریک از آنها را در پروژه ها بیان کنیم.

لزوم استفاده از ابزارهای Grunt و Gulp و Webpack:

تسک های بسیاری هستند که هر توسعه دهنده فرانت اند با آنها درگیر هستند و تقریبا در هر پروژه باید آنها را تکرار کنند. مانند ادغام و مینیفای کردن کدهای css. بوسیله ابزارهای اتوماسیون تسک ها مانند Gulp می توان در زمان و انرژی صرفه جویی کرد و اینگونه کارها را به آنها سپرد.

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

اگرچه استفاده از ابزارهای فوق الزامی نمی باشد اما مزایای بسیاری برای توسعه دهندگان دارد. علاوه بر مزیت های فوق می توان به کاهش خطای انسانی در انجام تسک ها اشاره کرد. هر ابزار پلاگین های مختص خود را جهت انجام تسک های مختلف دارد. مثلا وب پک برای بهینه سازی تصاویر، پلاگین image-optimize-webpack-loader را دارد.

تفاوت عمده ابزارهای Gulp و Grunt:

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

الف- نحوه کارکرد:

تفاوت اصلی بین اجراکننده های تسک یا task runner های گرانت و گالپ نحوه کارکرد آنها می باشد. گرانت Grunt برای اجرای تسک ها از فایل های موقت یا temporary files کمک می گیرد اما گالپ Gulp از Node Stream استفاده می کند. از طرفی دیگر گرانت تسک ها را یکی یکی انجام می دهد اما گالپ همه تسک ها را به یکباره اجرا می کند.

ب- نحوه تنظیمات:

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

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

بنابراین باید با توجه به نیازمندی های پروژه خود بهترین ابزار را از بین Gulp و Grunt انتخاب کنید.

ج- سرعت:

توسعه دهندگان Gulp تصمیم گرفتند لاجیک برنامه نوبسی متفاوتی نسبت به Grunt در نظر بگیرند. دستورات گالپ بصورت ناهمگام یا Async اجرا می شوند. یعنی این امکان وجود دارد که چندین فایل بطور همزمان و مجزا پردازش شوند.

از طرف دیگر گرانت فقط می تواند یک عملیات را در آن واحد اجرا کند.

سایت TMWtech طی تحقیقی که روی سرعت کامپایل فایل های SASS در گالپ و گرانت انجام داده، به این نتیجه رسیده که کامپایل SASS  توسط گالپ حدود 1.3 ثانیه طول میکشد و در گرانت 2.3 ثانیه!

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

مقایسه میزان محبوبیت 4 ابزار Grunt-Gulp-WebPack-Browserify

تفاوت بین Browserify و WebPack:

کار module bundler ها ادغام منابع استاتیک وب اپلیکیشن یا وب سایت و همچنین بهینه سازی آنها می باشد. در سال های اخیر تعدادی ماژول باندلر ارائه شدند که webpack و browserify دو نمونه از معروف ترین آنها می باشند.

Browserify:

هدف تیم توسعه دهنده browserify اجرای کدهای Node.js در مرورگر می باشد. علاوه بر این، browserify می تواند ماژول های مختلف را در یک ماژول واحد ترکیب کند.

browserify یک module bundler است و فاقد ویژگی های یک task runner می باشد. پس در هنگام استفاده از این ابزار نیاز به یک task runner مانند gulp یا grunt خواهید داشت. باید در هر پروژه تنظیمات browserify را بطور مجزا انجام دهید.

Webpack:

ابزار webpack در سالهای اخیر به تدریج در حال گسترش و محبوبیت در بین کاربران است. در بسیاری از کتابخانه های جاوا اسکریپتی مانند ریکت ReactJS از وب پک بعنوان Module Bundler استفاده می شود.

بر اساس آماری که سرویس گوگل ترندز از میزان جستجوی کاربران ارائه می کند، سرچ عبارت webpa در بین سالهای 2015 تا 2017ck رشد قابل توجهی داشته است. همانطور که در نمودار زیر مشاهده می کنید وب پک از گرانت و گالپ میزان سرچ بیشتری دارد.

کاربردهای ابزار وب پک:

ابزار وب پک کارهای زیادی می تواند انجام دهد که در لیست زیر به برخی از مهم ترین آنها اشاره می کنیم:

– تشخیص کدهای بلا استفاده در پروژه و حذف اتوماتیک آنها از سورس کد

– لود کدها فقط در مواقع موردنیاز

– مانیتور کردن تغییرات فایل ها

– ترنسپایل کردن کدهای ES6 و بالاتر به ES5 توسط  پلاگین Babel

– راه اندازی یک وب سرور

– بهینه سازی تصاویر وب

– ادغام: merge و فشرده سازی:minify فایل های html, css, js

در گذشته برای اتوماتیک سازی تسک ها در حین توسعه اپلیکیشن ها نیاز بود از چندین ابزار و tools استفاده می کردیم. مانند Browserify+Gulp یا Grunt+پلاگین های متعدد

اما webpack می تواند چندین کار را با هم انجام دهد و نیازی به ابزار دیگری نخواهد بود.

وب پک برای کار با منابع استاتیک وب سایت یا وب اپلیکیشن عالی است و بخوبی می تواند فایل های css و تصاویر را بهینه کند. قابلیت دیگری که وب پک ارائه می دهد ویژگی Hot Reloading می باشد. با استفاده از این ویژگی دیگر نیازی نیست با هر بار تغییر در کدهای پروژه صفحه مرورگر را ریلود کنید و مرورگر بطور اتومات refresh خواهد شد.

مقایسه ابزارهای Gulp-Grunt-Webpack-Browserify:

واضح است که webpack معروف ترین و کاربردی ترین ابزار در توسعه اپلیکیشن های جاوا اسکریپتی است. همانطور که می توانید در تصویر زیر ببینید وب پک در سایت Github تا الان، یعنی اول مارچ 2021، بیش از 36 هزار ستاره دریافت کرده است. این قضیه بیانگر میزان محبوبیت ابزار وب پک در بین توسعه دهندگان می باشد.

ابزار browserify از وب پک قدیمی تر است و یکی از نقاط قوت آن آپدیت مکرر آن است. در تصویر زیر مشاهده می کنید که browserify بیش از 13 هزار ستاره دریافت کرده است.

از ویژگی های گالپ می توان به ثبات قدم و داشتن pull request کمتر نسبت به رقبا اشاره کرد. در گیتهاب بیش از 32k star دارد.

ابزار گرانت Grunt هم در سایت Github بیش از 12 هزار ستاره دریافت کرده است:

تفاوت عمده بین عملکرد ابزارهای فوق اینست که browserify برای کامل بودن نیاز به gulp یا grunt دارد اما webpack بخودی خود کامل است و نیاز به third-party ندارد. اگرچه ابزار browserify یادگیری آسان تر وسریع تری دارد.

در ابزارهای گالپ و گرانت می توان تسک ها را مجزا کرد و اینکار منجر به کد خواناتر و build معنادارتری خواهد شد. به نظر من برای صرفه جویی در زمان و انرژی، استفاده از webpack بعنوان یک module bundler گزینه مناسب تری خواهد بود. یکی از مزیت های وب پک اینست که نیازی ندارد تنظیمات یا کانفیگ آن از ابتدا یا scratch انجام شود.

جمع بندی:

هر توسعه دهنده باید بر اساس نوع پروژه خود و نیازمندی های آن یکی از ابزارهای gulp-grunt-webpack-browserify را انتخاب کند. طبق نمودارهایی که در این مقاله ارائه کردیم و بر اساس تجربه پیشنهاد ما استفاده از وب پک است. وب پک هم task runner و هم module bundler. اما ابزارهایی مانند گالپ فقط task runner می باشند.