مخصوص اعضای ویژه 
توسعه‌دهندگان Frontend بیشتر با ابزارهای buildای که در زیر بیان شده است کار می‌کنند:
package managers،
task runners،
module loaders،
module bundlers،
و غیره.
در این مقاله ما بهترین ابزارهای build را که می‌توانید در توسعه frontend استفاده کنید جمع‌آوری کرده‌ایم. توجه داشته باشید که همه این ابزارها در خط فرمان (command line) اجرا می‌شوند، بنابراین آن‌ها با رابط کاربری گرافیکی همراه نیستند.
npm .1 (package manager)
npm نام اختصاری Node Package Maid است که package manager ی پیش‌فرض Node.js است. هنگامی که Node.js را روی سیستم خود نصب می‌کنید، npm نیز به صورت اتوماتیک نیز نصب می‌شود و شما می‌توانید از طریق رابط command line به آن دسترسی داشته باشید. با npm، می‌توانید هر پکیج Node.js را با یک دستور نصب کنید.
می‌توانید همه پکیج‌های موجود Node.js را در ریجیستری npm که می‌توانید از طریق نوار جستجو در بالای صفحه اصلی npm به آن دسترسی داشته باشید، پیدا کنید. شما فقط باید نام پکیج مورد نظر خود را در نوار جستجو تایپ کنید (مثلا postcss)، و به صفحه پکیج هدایت می‌شوید که شامل هر چیزی است که شما باید در مورد پکیج، فرآیند نصب آن و سایر موارد مربوط به آن بدانید.
ویژگی‌های اصلی:
فرآیند نصب آسان
نرم‌افزار Cross-platform (Windows، Linux، macOS، SmarOS و موارد دیگر)
صدها هزار پکیج
مدیریت وابستگی کارآمد از طریق فایل package.json
گزینه‌های مختلف پیکربندی (از طریق command line)
مستندات وسیع و جامعه مفید
2. Yarn (package manager)
Yarn یک package manager ی frontend است که می‌تواند به عنوان جایگزینی برای npm استفاده شود. از آنجایی که Yarn خودش یک پکیج Node.js است، قبل از اینکه بتوانید از Yarn بر روی سیستم خود استفاده کنید، باید Node.js را نصب کنید. سپس فقط باید راهنمای نصب را دنبال کنید تا از آن برای مدیریت وابستگی‌های frontend استفاده کنید.
اگرچه npm ابزار فوق‌العاده‌ای است، اما هنگام کار با آن متوجه می‌شوید که گاهی اوقات زمان قابل توجهی را می‌گیرد. اگر شما وابستگی‌های زیادی را برای نصب ندارید، این لزوما یک مشکل محسوب نمی‌شود. با این حال اگر شما با آن به صورت سنگین کار می‌کنید، می‌تواند ایده خوبی باشد به سراغ Yarn بروید زیرا زمان build بسیار سریعی دارد.
Yarn با کش کردن هر پکیج، به فرآیند build سرعت می‌بخشد، بنابراین مجبور نیستید چندین بار وابستگی‌های خود را دانلود کنید. همچنین عملیات موازی را اجرا می‌کند تا زمان build را بیشتر کاهش دهد.
ویژگی‌های اصلی
ابزار Cross-platform (Windows، Linux، macOS) با راهنمای نصب جداگانه برای هر پلت‌فرم
سازگاری با تمام پکیج‌های Node.js
زمان build سریع
امنیت بالا با استفاده از بررسی برای تأیید صحت پکیج‌ها
حالت آفلاین
جلوگیری از ایجاد موارد تکراری
3. Grunt (task runner)
Grunt یک task runnerی frontend است که به شما امکان می‌دهد کارهای تکراری مانند تست را انجام دهید. Task runnerها با package managerها متفاوت هستند، زیرا نمی‌توانید از آن‌ها برای مدیریت وابستگی‌ها استفاده کنید. شما فقط در صورتی که می‌خواهید برخی وظایف را طی هر فرآیند build انجام دهید به آن‌ها نیاز دارید.
Grunt یک پکیج Node.js است، می‌توانید آن را با npm، Yarn یا package managerهای دیگر Node.js نصب کنید. Grunt وابستگی‌های سفارشی مورد نیاز خود را برای انجام وظایف از پیش تعریف‌شده خود در فایل package.json نگه می‌دارد. شما می‌توانید وظایف خود را در Gruntfile تعریف کنید که در طی هر فرآیند build اجرا می‌شود و به صورت خودکار هر کاری که شامل می‌شود را انجام می‌دهد.
ویژگی‌های اصلی
ابزار خط فرمان Cross-platform که روی هر سیستمم عاملی اجرا می‌شود
فرآیند پیکربندی ساده
اکوسیستم عظیم با صدها پلاگین برای افزودن ابزارهای frontend (مثل Sass، Jade، JSHint، Handlebars، RequireJS و موارد دیگر) که کارهای از پیش تنظیم شده را تکمیل می‌کند
در صورت لزوم انجام کارهای غیرهمزمان
مستندات گسترده
به طور گسترده پذیرفته شده است
4. Gulp (task runner)
Gulp یک task runner اتوماتیک دیگر است و همچنین قوی‌ترین رقیب Grunt می‌باشد. همچون Grunt، شما می‌توانید از Gulp برای خودکارسازی وظایف تکراری front-end مانند پیش‌پردازش CSS، بهینه‌سازی تصویر و بسیاری موارد دیگر استفاده کنید. این نیز یک پکیج Node.js است که می‌توانید هم با package managerی npm و هم Yarn آن را نصب کنید. می‌توانید کارهای خود را در Gulpfile تعریف کرده و وابستگی‌های مربوط به کارهای خود را در فایل package.json پیکربندی کنید.
بزرگ‌ترین تفاوت آن با Grunt این است که Gulp از تکنیک‌های خودکارسازی کارآمدتری استفاده می‌کند که باعث می‌شود زمان build سریع‌تر انجام شود. در حالی که Grunt از فایل‌های موقتی برای پردازش کارها استفاده می‌کند، Gulp عملیات حافظه را بدون نوشتن در فایل‌های موقت انجام می‌دهد. این عملیات حافظه‌ای Node streams نامیده می‌شوند که می‌توانند در زمان بسیار صرفه‌جویی کنند، به خصوص اگر می‌خواهید در هر build چندین کار را پردازش کنید.
ویژگی‌های اصلی
task runner ی Cross-platform که می‌تواند به عنوان بسته Node.js نصب شود
برای سرعت بخشیدن به عملیات از Node streams استفاده می‌کند
دارای اکوسیستم عظیم با هزاران پلاگین است
دارای code base با کیفیت با استفاده از بهترین عملکردهای Node.js
مستندات آسان
5. Browserify (module loader/bundler)
Browserify یک ماژول Node.js است که به شما امکان می‌دهد وابستگی‌های front-end را باندل کرده و آن‌ها را به عنوان یک فایل واحد JavaScript در مرورگر کاربر بارگیری کنید. Package managerهایی مثل npm و Yarn ماژول‌ها را در سمت سرور با استفاده از تابع require() ی Node.js که برای بارگیری ماژول‌ها طراحی شده است بارگیری می‌کنند. Browserify متد require() را در سمت کلاینت فراهم می‌کند، که می‌تواند منجر به عملکرد سودمندی شود.
با Browserify، مرورگر کاربر شما فقط یک بار فایل استاتیک جاوااسکریپت که شامل همه وابستگی‌هایی که پروژه شما به آن متکی است را بارگیری می‌کند. شما می‌توانید جاوااسکریپت باندل شده خود را به عنوان تگ <script> به صفحه خود اضافه کنید. با این حال توجه داشته باشید که Browserify یک ماژول Node.js و پیاده‌سازی CommonJS API (مشابه npm) است. شما فقط می‌توانید از آن برای بارگیری ماژول‌های Node.js استفاده کنید اما انواع دیگر فایل‌ها (یا موارد دیگر) جاوااسکریپت را ندارید.
ویژگی‌های اصلی
همه وابستگی‌های Node.js را درون یک فایل واحد باندل می‌کند
به برنامه‌های ماژولار که به چندین ماژول Node.js متکی هستند سرعت می‌بخشد
امکان استفاده از نیازهای خارجی را ممکن می‌سازد (می‌توانید به ماژول‌ها از تگ‌های دیگر < script > نیاز داشته باشید)
در صورت لزوم امکان تقسیم باندل‌ها را ممکن می‌سازد
دارای مستندات دقیق و کتاب‌های راهنمای سودمند است
6. Webpack (module loader/bundler)
Webpack یک module bundler پیشرفته است که به شما اجازه می‌دهد همه وابستگی‌های خود را باندل کرده و آن‌ها را به عنوان assetهای استاتیک در مرورگر کاربر بارگیری کنید. در حالی که Browserify فقط ماژول‌های Node.js را باندل می‌کند، Webpack می‌تواند هر نوع فایل front-endای را باندل کند، مثل فایل‌های scss.، html.، css.، js.، تصاویر و assetهای دیگر.
علاوه بر ماژول‌های CommonJS مورد استفاده در اکوسیسیتم Node.js، Webpack می‌تواند ماژول‌های AMD و ECMAScript بومی (native) را باندل کند. Webpack پروژه شما را تحلیل می‌کند و یک نمودار وابستگی می‌سازد. سپس بر اساس این نمودار، فایل‌ها و ماژول‌های شما را در یک یا چند فایل استاتیک باندل می‌کند که می‌توانید به صفحه HTML خود اضافه کنید.
از آنجا که خود Webpack نیز یک ماژول Node.js است، می‌توانید آن را با package managerی npm یا Yarn نصب کنید.
به طور پیش‌فرض، پیکربندی پروژه‌های Webpack به دلیل گزینه‌های متعددی که به شما امکان می‌دهد پروژه خود را تنظیم کنید، زمان زیادی می‌برد. با این حال، Webpack 4، شامل گزینه zero-configuration است که فرآیند build کردن را به صورت اتومات انجام می‌دهد و فقط شما باید فایل ورودی را تعریف کنید.
ویژگی‌های اصلی
گزینه‌های پیکربندی متعدد
کد را به بخش‌های کوچک‌تر تقسیم می‌کند که می‌تواند به صورت غیرهمزمان بارگیری شود
حذف کدهای بی‌استفاده
پشتیبانی از source mapها
گزینه Zero-config (برای Webpack 4)
اکوسیستم وسیع با رابط پلاگین غنی
جمع‌بندی
ابزارهای build برای Frontend به شما کمک می‌کند تا کد توسعه خود را به کد آماده برای تولید تبدیل کنید که بدون هیچ مشکلی روی هر دستگاه یا پلت‌فرمی اجرا می‌شود. در این مجموعه، به بهترین ابزارهای build که می‌توانید در پروژه وب خود استفاده کنید، مانند package managers، task runners، و module loaders/bundlers نگاهی انداختیم.
علاوه بر موارد وسیعی که به طور گسترده اتخاذ شده‌اند، ابزارهای جدیدی در بازار وجود دارند که به طور مداوم در حال رشد هستند، مانند pnpm package manager (جایگزینی برای npm و Yarn)، Parcel module bundler (جایگزینی برای Webpack) و Rollup ES module bundler (شبیه به Browserify اما ماژول‌های ECMAScript را به جای موارد CommonJS باندل می‌کند). اگر شما به این موارد جدید علاقه‌مند و خوش‌بین هستید، این ابزارهای جدیدتر نیز ارزش بررسی را دارند.
نظرات کاربران در رابطه با این دوره