Task Runners (Gulp, Grunt и т.д.) И Bundlers (Webpack, Browserify). Зачем использовать вместе?

Я немного новичок в мире задач и мире поставщиков и, проходя через такие вещи, как

Grunt, Gulp, Webpack, Browserify

я не чувствовал, что между ними существует большая разница. Другими словами, я чувствую, что Webpack может делать все, что делает бегун задачи. Но все же я получил огромные примеры, когда gulp и webpack используются вместе. Я не мог понять причину.

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

Спасибо заранее.

Ответ 1

Grunt и Gulp являются на самом деле задачами, и у них есть различия, такие как config driven задач и потоковых преобразований. Каждый из них имеет свои сильные и слабые стороны, но в конце концов они в значительной степени помогают вам создавать задачи, которые могут быть запущены для решения проблемы с большой сборкой. В большинстве случаев они не имеют никакого отношения к фактическому времени выполнения приложения, а скорее преобразуются или помещают файлы, конфиги и другие вещи на место, чтобы время работы работало так, как ожидалось. Иногда они даже запускают серверы или другие процессы, необходимые для запуска вашего приложения.

Webpack и Browserify - это пакеты. В принципе, они предназначены для выполнения всех зависимостей пакетов и объединения их источника в один файл, который (в идеале) может использоваться в браузере. Они важны для современного веб-разработки, потому что мы используем так много библиотек, которые предназначены для работы с Node.js и v8. Опять же, есть плюсы и минусы и разные причины, по которым некоторые разработчики предпочитают один или другой (или иногда оба!). Обычно выходные пакеты этих решений содержат какие-то механизмы начальной загрузки, которые помогут вам добраться до нужного файла или модуля в потенциально огромном комплекте.

Размытая линия между бегунами и связями может заключаться в том, что связки могут также выполнять сложные преобразования или trans-pilations во время их выполнения, поэтому они могут делать несколько вещей, которые задачи могут выполняться. Фактически, между браузером и webpack, вероятно, существует около сотни трансформаторов, которые вы можете использовать для изменения исходного кода. Для сравнения, по крайней мере 2000 gulp плагинов, перечисленных на npm прямо сейчас. Таким образом, вы можете видеть, что есть ясные (надеюсь,...;)) определения того, что лучше всего подходит для вашего приложения.

При этом вы можете увидеть сложный проект на самом деле с использованием как бегунов задач, так и пакетов-пакетов одновременно или в тандеме. Например, в моем офисе мы используем gulp для запуска нашего проекта, и webpack фактически запускается из определенной задачи gulp, которая создает исходные пакеты, которые нам нужно для запуска нашего приложения в браузере. И поскольку наше приложение isomorphic, мы также собираем код сервера.

По моему скромному мнению, вы можете ознакомиться со всеми этими технологиями, потому что, скорее всего, вы увидите (используйте) все это в ходе своей карьеры.