کدام ابزار وب برای شما مناسب هستند؟

با سلام خدمت تمام عزیزان، قصد داریم تا درباره ابزار های Grunt.js ، Gulp.js و WebPack صحبت کنیم و به ویژگی هر کدام بپردازیم.

این مطلب در دانشکده فنی و حرفه ای شهید شمسی پور در مقطع کارشناسی نرم افزار ارائه شده است:

متن ویدیو

سلام، می خواهیم درباره استفاده از ابزار JavaScript یا Tooling Options صحبت کنیم.

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

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

علاوه بر آن می توان از قابلیت های اسکریپت نویسی NPM یا Node Package Manager که همراه با Node.js نصب می شود استفاده کرد. تمام این ابزار ها از جمله Grunt، Gulp و WebPack بر اساس Node.js ساخته شده اند و برخی از افراد ابزار های خود را بر روی Node برای مدیریت پروژه های خود می نویسند. بعضی مواقع این ابزار ها با نام CLI یا محیط خط فرمان شناخته می شوند و در واقع Grunt، Gulp و WebPack همگی CLI هایی هستند که بر روی Node.js پیاده سازی شده اند.

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

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

می توانید ببینید که وظایف دیگری مانند اجرای یک سرور زنده در اینجا قرار دارند. برای مثال می بینید که در اینجا می توانیم نام port مد نظر خود که برای اجرای سرور زنده استفاده خواهیم کرد را مشخص کنیم. حال در اینجا وظیفه ای تحت نام Watch داریم که به دنبال تغییرات فایل های مختلف می گردد و سپس مجددا کار خود را انجام می دهد. در این زیر یک وظیفه پیش فرض ثبت خواهیم کرد که پس از هر بار نوشتن دستور Grunt اجرا خواهد شد.

علاوه بر این می توانیم هر کدام از این وظایف را بصورت جداگانه اجرا کنیم. GruntJS قدیمی ترین گزینه در بین ابزار ها می باشد. من به شما می گویم که باید بدانید این ابزار چیست و چگونه عمل می کند. احتمالا با پروژه هایی که از Grunt استفاده می کنند مواجه خواهید شد اما چیزی نیست که برای فهمیدن آن نیاز به تجربه کاری زیادی داشته باشد. همانطور که فکر می کنید، این فایل JSON به راحتی قابل فهم هست. ابزار بعدی Gulp.js یا Gulp نام دارد و کمی بیشتر از یک سال بعد از Grunt منتشر شد پس تشابه زیادی به آن دارد و تفاوت اصلی آن استفاده از JavaScript عادی به جای JSON برای پیکربندی پروژه می باشد.

این به این معناست که انعطاف پذیری بیشتری نسبت به Grunt دارد و علت آن وجود کنترل بیشتر در انجام کار ها می باشد. فایل پیکربندی آن به این شکل است. می توانید بگویید که بسیار شبیه به پیکربندی Grunt هست با این تفاوت که ما فقط از JavaScript ساده به جای JSON استفاده می کنیم. تفاوت دیگر در افزونه های این دو ابزار می باشد بطوری که افزونه های Gulp بر روی انجام یک وظیفه و افزونه های Grunt بر روی انجام چندین وظیفه همزمان تمرکز دارند. به همین دلیل Gulp می تواند سریعتر و همچنین به لطف سادگی و تشابه افزونه ها می تواند بصورت نامتناقض اجرا شود.

در وظایف Gulp متوجه خواهید شد که همیشه یک وظیفه نقش تعیین مبدا دیگر وظایف و یک وظیفه برای تعیین مقصد وظایف دیگر را دارا است تا بتوانند به یک صورت اجرا و تمام شوند و معمولا پیکربندی های بیشتری مثلا برای style ها دقیقا مانند Grunt انجام شوند. تفاوت دیگر این است که Gulp از مفهوم جریان داشتن استفاده می کند در حالیکه اجرای Grunt بصورت متوالی است. Gulp اجرای هر وظیفه را مجزا کرده و آن ها را در حافظه دسته بندی می کند و این باعث می شود تا وظایف بتوانند بصورت همزمان اجرا شوند.

حال متوجه خواهید شد که یادگیری کار با Gulp در صورت دانستن JavaScript بسیار ساده است و یک مزیت بزرگ نسبت به ابزار بعدی ما که راجب آن صحبت خواهیم کرد، محسوب می شود. WebPack در سال های اخیر بسیار محبوب شده است و علت اصلی آن پیشرفت ماژول ها در توسعه وب می باشد. در حال حاضر محبوب ترین و بروز ترین فریم ورک های JavaScript از جمله Angular ، React و Vue.js بر مفهوم تعیین قطعات کوچک محتاط به نام ماژول طراحی شده اند.

ابزار WebPack با در نظر گرفتن ماژول ها به جای وظایف طراحی شده اند. یک مثال خوب، یکی از ویژگی های بسیار خوب WebPack قابلیت پردازش تغییر در یک ماژول بدون نیاز به پردازش بقیه ماژول ها می باشد در حالیکه Gulp یا Grunt به پروژه به دید دنباله ای از وظایف نگاه می کنند. ماژول ها می توانند بطور مستقل بروز رسانی شوند و این باعث می شود که برای کتابخانه های مدرن فوق العاده سریع و عملکرد عالی داشته باشند. علاوه بر آن می تواند توابع پیچیده مانند tree shaking که به شما امکان حذف بخش های استفاده نشده کتابخانه در برنامه را می دهد، را انجام دهد.

بنابراین تمرکز ماژولار و قابلیت های پیشرفته باعث می شود که این یک کتابخانه محبوب مخصوصا مناسب برای انجام پروژه های مدرن باشد. به علت طراحی و نحوه عملکرد خاص، راه اندازی و درک WebPack پیچیده تر است. اگر نگاهی به فایل پیکربندی WebPack بی اندازید، می توانید ببینید که از مجموعه ای از loader ها و افزونه ها برای مدیریت انجام کار ها استفاده می کند. برای مثال با اینکه برای شما یک سرور در حال اجرا دارد، شما نیازی به راه اندازی چیزی ندارید چرا که از قبل این عمل برای شما صورت گرفته است. WebPack در چگونگی اجرای محیط کاری شما تصمیماتی اتخاذ می کند.

به وضوح WebPack پیچیده ترین اما قدرتمند ترین ابزار در بین task runner ها است و برای کار با آن نیاز به یادگیری یا حداقل دانستن نحوه تنظیم کردن دارد. در اینجا چندین صفحه معرفی می کنم که به شما اطلاعات بیشتری درباره نحوه کار کردن با این ابزار و همچنین دوره های آموزشی مرتبط می دهد.

از اینکه تا اینجا با من همراه بودید متشکرم.

خدا نگهدار.

دوره های آموزشی مرتبط

https://www.lynda.com/Web-Design-tutorials/Web-Project-Workflows-Gulp-js-Git-Browserify/154416-2.html

https://www.lynda.com/Grunt-js-tutorials/Web-Workflows-Grunt-js/368921-2.html

https://www.lynda.com/Webpack-tutorials/Learning-Webpack-3/628711-2.html

منبع