Сборщики модулей, оптимизация и автоматизация

Сборщики используются для удобства разделения кода на определенные модули, с которыми удобно работать, легко добавляются новые модули, их можно использовать повторно, различные операции вроде оптимизации кода могут быть выполнены в автоматическом режиме.

Webpack

(на NodeJS)

http://webpack.github.io

Сборщик модулей с большим количеством функций и плагинов. Webpack собирает различные JS — файлы, или, например, CSS — стили, HTML-файлы, даже изображения, соединяет и формирует один оптимизированный файл.

Видео на тему: https://learn.javascript.ru/screencast/webpack

Brunch

http://brunch.io

Сравнение с другими сборщиками: http://brunch.io/docs/why-brunch#brunch-vs-webpack

Browserify

(на NodeJS)

Загрузчик и сборщик модулей JS

http://browserify.org

Подробно  про Browserify: http://prgssr.ru/development/nachinaem-rabotu-s-browserify.html

Babel

http://babeljs.io

Babel — это транспайлер, то есть позволяет переводить код из одного языка в другой.

Здесь можно попробовать его в работе на примере перевода Javascript es-6 в es-5 и наоборот: https://babeljs.io/repl/

Немного про работу babel: https://codedojo.ru/tutorials/babel

Gulp

(на NodeJS)

http://gulpjs.com

Инструмент позволяет описывать задачи и осуществить любые операции, такие как сборка модулей, очистка, тестирование, загрузка, сохранение и прочие.

Подбробно про Gulp: https://webformyself.com/gulp-dlya-nachinayushhix/

Видеоуроки: https://learn.javascript.ru/screencast/gulp

Grunt

(на NodeJS)

https://gruntjs.com

Таже описывает и автоматизирует задачи, оптимизирует код, как 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

Другие статьи: