Сборщики используются для удобства разделения кода на определенные модули, с которыми удобно работать, легко добавляются новые модули, их можно использовать повторно, различные операции вроде оптимизации кода могут быть выполнены в автоматическом режиме.
Webpack
(на NodeJS)
Сборщик модулей с большим количеством функций и плагинов. Webpack собирает различные JS — файлы, или, например, CSS — стили, HTML-файлы, даже изображения, соединяет и формирует один оптимизированный файл.
Видео на тему: https://learn.javascript.ru/screencast/webpack
Brunch
Сравнение с другими сборщиками: http://brunch.io/docs/why-brunch#brunch-vs-webpack
Browserify
(на NodeJS)
Загрузчик и сборщик модулей JS
Подробно про Browserify: http://prgssr.ru/development/nachinaem-rabotu-s-browserify.html
Babel
Babel — это транспайлер, то есть позволяет переводить код из одного языка в другой.
Здесь можно попробовать его в работе на примере перевода Javascript es-6 в es-5 и наоборот: https://babeljs.io/repl/
Немного про работу babel: https://codedojo.ru/tutorials/babel
Gulp
(на NodeJS)
Инструмент позволяет описывать задачи и осуществить любые операции, такие как сборка модулей, очистка, тестирование, загрузка, сохранение и прочие.
Подбробно про Gulp: https://webformyself.com/gulp-dlya-nachinayushhix/
Видеоуроки: https://learn.javascript.ru/screencast/gulp
Grunt
(на NodeJS)
Таже описывает и автоматизирует задачи, оптимизирует код, как JS, так и HTML и CSS.
Подробнее про Grunt: https://webref.ru/dev/grunt-getting-started
Сравнение между собой: https://habrahabr.ru/post/215131/
Сравнение сборщиков на англ: https://survivejs.com/webpack/appendices/comparison/
https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners