تا به حال از چه گزینه های تجهیز ابزاری استفاده کرده اید؟

مقدمه

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

افراد مختلف از نرم افزارهای تجهیز ابزار مختلف استفاده میکنند و تیم های توسعه دهنده، معمولا تنظیمات مورد ترجیح خود را خواهند داشت. شما حتی به تیم هایی بر میخورید که بسته به نوع پروژه ای که بر روی آن کار میکنند، از تنظیمات متفاوتی استفاده میکنند. با توجه به مطالب گفته شده، پلتفرم های اصلی تجهیز به ابزار که در بستر web میتوان استفاده کرد، عبارتند از Grunt, Gulp, WebPack. بله البته کتابخونه ها و نوع های متفاوت دیگری نیز وجود دارند که میتوانید نگاهی به آنها بیندازید، ولی این کتابخونه ها محبوبیت زیادی ندارند.

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

حال برخی افراد script های خودشون رو مینویسند و یا اینکه به صورت ترکیبی از برخی از این ابزارها جهت انجام وظایف مدیریتی استفاده میکنند. خب حالا بگذارید تا نگاهی به این گزینه ها بیندازیم. البته اول به پدر این ابزار ها یعنی GruntJS میپردازیم.

GruntJS

مجددا میگم که GruntJS یک CLI برای وظایف (task) در حال اجراست. یک وظیفه چیزی است که شما میخواهید به کد خود اعمال کنید. برای مثال، به حداقل رساندن کد و یا تست گیری آن، یک وظیفه محسوب میشه. برای اینکه کار کنه، شما یک فایل پیکربندی درست میکنید. این فایل از JSON جهت پیکر بندی اتوماسیون شما، استفاده میکنه. با استفاده از این فایل، شما میتونید مجموعه ای از وظایف را تعریف کنید و همچنین وظایفی رو بوجود بیارید که کارهایی همچون پردازش SASS، کمینه کردن HTML و اجرای یک سرور زنده به هنگام توسعه، رو انجام بده. GruntJS یکی از گزینه های تجهیز ابزار قدیمی محسوب میشود. باید بگم که نیاز دارید تا یادش بگیرید و همچنین نیاز به دانستن مقدمات اون، جهت راه انداختن دارید. احتمالا در حرفه کاری خودتون با پروژه هایی مواجه میشید که از Grunt استفاده میکنند، اما اونقدرها هم ضروری نیست که بخواهید نسبت به آن خیلی تجربه داشته باشید. حالا گزینه تجهیز ابزار بعدی اسمش Gulp.js یا Gulp هستش که یک ذره بیشتر از یک سال بعد از Grunt منتشر شد.

Gulp

شباهتهایی با Grunt داره و تفاوت اصلیش اینه که بجای استفاده از JSON برای پیکربندی، از JavaScript استفاده میشه. این به این معنی هستش که از Grunt منعطف تر هستش، چرا که کنترل بیشتری بر روی کاری که انجام میده، داره. فایل های پیکر بندی، میشه گفت که شبیه به پیکر بندی Grunt هستش بجز اینکه ما داریم از JavaScript بجای فایل پیکربندی JSON استفاده میکنیم. یکی دیگه از تفاوت ها اینه که، plugin های Gulp بر روی تک وظیفه (single task) های در حال اجرا تمرکز میکنه در حالی که در Grunt میتوانیم بعضی اوقات وظایف چندگانه (multiple task) رو انجام بدیم. به همین علت Gulp میتونه سریعتر باشه چرا که plugin های اون ساختاری ساده و مشابه دارند.

خب، با وظیفه ای از نوع Gulp متوجه میشید که شما همیشه یک وظیفه ای دارید که منشاء وظیفه رو تعریف میکنه و همچنین مقصدش رو، بنابراین شروع و پایان آنها مشابه بوده و ما معمولا یک پیکربندی مضاعفی رو هم پاس میدیم، مثلا اینکه style های متفاوت رو میخواهیم یا نه، دقیقا مثل Grunt. یکی دیگه از تفاوتهای اصلی اینه که Gulp از مفهوم stream ها استفاده میکنه در حالی که اجرای Grunt بیشتر پیاپی (sequential) میباشد، Gulp اجرای هر وظیفه رو به صورت جداگانه قرنطینه میکنه و اونها رو در حافظه handle میکنه، که به این معناست که میتونه وظایف رو به صورت همزمان (simultaneously) اجرا کنه. اگه با JavaScript آشنا باشید، متوجه میشید که فراگیری و کارکردن با Gulp بسیار راحته.

WebPack

در این چند سال اخیر خیلی مشهور شده و اون هم بیشتر بخاطر افزایش استفاده از module ها در توسعه web هستش. در حال حاضر framework های محبوب JavaScript ی مثل Angular و React و Vue.js بر اساس مفهوم تعریف ذره های کوچکی از کدهای خود مختار به نام module طراحی گشته اند.

وب پک (WebPack) توسط module ها طراحی شده، بجای اینکه از وظایف (task) در آن استفاده شده باشه. یکی از خصیصه های بسیار مهم WebPack قابلیت پردازش تغییرات داخل یک module، بدون نیاز به پردازش باقی module میباشد، در حالی که اجرا کننده های وظایف همچون Gulp یا Grunt پروژه را به صورت مجموعه ای از وظایف میپندارند، در حالی که WebPack آنها رو به صورت مجموعه ای از module های کوچکی که میتونه به صورت مستقل update کنه، میبینه. که همین اون رو به عنوان کتاب خونه امروزی، فوق العاده سریع و عالی میکنه. علاوه بر این میتونه توابع پیشرفته ای همچون Tree Shaking رو صدا کنه که باعث حذف قسمت هایی از کتابخانه ها میشن که در application شما مورد استفاده قرار نمیگیرند.

بنابر این تمرکز modular اون و همچنین خصایص پیشرفته اش، اون رو به یک کتابخانه محبوب تبدیل کرده، خصوصا در پروژه های امروزی. بخاطر نحوه طراحی اش و کارهایی که انجام میده، WebPack جهت پیکربندی (set up) و فهم (understand) میتونه خیلی پیچیده باشه. این کاملا واضحه که WebPack پیچیده ترین اجرا کننده های وظایف هستش و در عین حال قدرتمندترین هستش و شما نیاز خواهید داشت تا اون رو فرا بگیرید یا حد اقل نحوه شخصی سازیش (customize) رو یاد بگیرید.

لینک ویدیو در آپارات:

لینک ویدیو مرجع: