Зачем нужен Gulp?

вОбъясните, пожалуйста, на пальцах, что такое Gulp и зачем он нужен? Я в курсе, что это "сборщик проектов", но я слабо понимаю, как его использовать, и зачем это вообще надо? Я верстальщик, соответственно, предполагаемая область его использования - верстка.
  • Вопрос задан
  • 28187 просмотров
Решения вопроса 1
@artinnok
бекенд-программист
CSS и JS:
К примеру, у вас имеется большое количество (Х штук) css или js файлов, которое вы подключаете на своих страницах посредством тэгов <link> и <src>.
При загрузке страницы, браузер клиента будет отправлять X запросов к вашему серверу, а ваш сервер должен будет ответить на X запросов.
Это:
  1. Тормозит загрузку страницы - будете ждать ответа от сервера
  2. Загружает ваш сервер

С помощью сборщиков фронтэнда вы можете "склеить" все файлы в один - main.css и main.js, которые будут отдаваться 2 запросами с сервера. Также, вы сможете минифицировать CSS и JS. Под минификацией подразумевается уменьшение размеров файла на диске. Естественно, более легкий файлы будет быстрее прогружаться + минимальное количество запросов к серверу.

IMG:
К примеру, у вас имеется Х изображений размером 700 Кбайт. Клиенту надо будет загрузить 700 * X Кбайт. Если вы пропустите свои изображения через Gulp, то вы получите изображения с меньшим размером на диске и такого же качества, т.е. клиенту придется прогрузить примерно (500-600) * X Кбайт.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@Rabinzon
скрин
Все что красным, соберется в то что синим.
Например, когда проект разбивается на мелкие 'компоненты'. И вы используете предпроцессоры, например jade, sass все это нужно как то компилить и собирать в html и css. Gulp с этим делом справляется на УРА.
Ответ написан
Комментировать
@sergeystepanov1988
Если по простому, то Gulp это некий интерфейс для подключения и настройки различных плагинов, которые выполняют различные операции с файлами:
  • преобразование файлов (сжатие картинок, минификация js и css, объединение в один файл)
  • слежение за изменениями файлов и реакция на эти изменения
  • автоматизированное тестирование
  • автоматическое генерирование документации
  • компиляция с одного языка на другой (LESS -> CSS, TypeScript -> JavaScript, ES6 -> ES5)
Ответ написан
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Комментировать
@gearbox
gulp - это не сборщик, это таск раннер, а таски могут быть любыми, в том числе и на сборку. Стоит в одном ряду с grunt и является отражением make системы в web разработке. Сборщик (builder) - это webpack - универсальный комбайн, но как все универсальное дающий сбой там где надо ювелирно-точечно что либо подкрутить.
Ответ написан
Комментировать
dzenn
@dzenn
Если ты начинаешь использовать гульп, это как ездить 10 лет на приоре, а потом хоп и пересел в бентли.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы