Лень - двигатель прогресса: представляю себе постоянно программиста, который писал код, сохранял изменения. затем переходил в браузер, нажимал кнопку F5 - браузер обновлялся и программист видел изменения, которые он внес в код. Или взять взять работу с изображениями: скачал программу для оптимизации изображений, загрузил туда картинки, программа сжала их, и программист сохранил их для дальнейшей работы. И в один прекрасный день программисту это надоело и он подумал: "А что если написать такую программу, которая все это будет делать за меня? Загрузил ей на вход нужные данные и она сама и браузер обновила, и фото сжала и сохранила их где надо". Посидел он, подумал ,а потом взял да и написал. И эта программа работала. Как и все хорошее это нововведение быстро прижилось и получило развитие - начали появляться другие похожие программы, обрастая новыми возможностями. Появился выбор - каждый мог выбрать именно то приложение, которое больше ему по душе.
Эти программы называют: и сборщиками проектов, и системами сборки, и менеджер задач... Но суть одна: облегчить процесс web-разработки, взяв на себя рутинные задачи, которые отнимают у программиста очень много времени. Одна из самых популярных - Gulp.
При работе над своим сайтом-блогом я буду пользоваться именно Gulp-ом. Почему именно им? Ну во-первых у него классный логотип)
Во-вторых, как мне кажется, по нему больше информации и, следовательно, легче и быстрее можно найти ответ на интересующий тебя вопрос, что особенно важно для новичков, делающих первые шаги в мир автоматизации задач в области создания сайтов.
Какие задачи буду решать я при помощи Gulp. Я буду:
1. объединять несколько файлов в один. Написать код проще и удобнее, разбив страницу сайта на независимые смысловые блоки (отдельные файлы), а загрузить лучше один а не несколько файлов. Тем самым снизится количество запросов на сервер и за счет этого ускорится загрузка страницы (например у меня будут файлы header.html, footer.html, contacts.html, about.html, content.html - результатом работы Gulp станет один файл index.html)
2. минифицировать html, css, js файлы, удаляя из кода пробелы, отступы, комментарии и другие ненужные символы, которые увеличивают время загрузки страницы
3. оптимизировать изображения - сжимать, преобразовывать в webp формат, создавать svg-спрайты, что также положительно влияет на скорость загрузки страницы
4. работать с CSS-препроцессорами и оптимизировать их
Кроме этого, Gulp самостоятельно создает web-сервер для отладки проекта, следит за изменениями в файлах и перезагружает html-страницу в браузере при сохранении изменений в них, конвертирует и подключает шрифты, И это лишь небольшая часть того, что можно сделать с помощью этой программы.
Несмотря на то, что пользователей Gulp очень много, информации как развернуть сборку мало. Из того, что прочитал и просмотрел я, хочу выделить видео Фрилансера по жизни "Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов"
Я c удовольствием смотрел это видео, параллельно делая все, что делал Евгений. Установка и настройка некоторых плагинов и функций вызвала определенные затруднения, но зато пока их преодолевал узнал много нового и интересного - внимательно читаем комментарии и пользуемся поиском.
Все необходимые ссылки можно посмотреть в описании к этому видео.
P.S. Совет тем, кто смотрит или собирается смотреть подобные видео: используйте Git - установили плагин, проверили - работает - закомитьте! В случае, если запутались и что-то пошло не так - вернулись к предыдущему коммиту и начали все заново. Мне это очень помогло!