Gulp 4. Полное руководство и настройка своей собственной сборки для верстки

Привет! В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является Gulp. Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое. В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. Поехали! ctrl c два раза - для остановки сборки. У этого видео есть обновление - добавление новых функций в сборку. Ссылка - Содержание: 00:00 - вступление 01:40 - про и npm 02:57 - создаем папку проекта 03:26 - открываем консоль в конкретной папке 03:45 - создаем файл 05:10 - установка gulp 09:17 - создаем папку исходников - src 10:24 - создаем файл для написания тасков 11:28 - работа со стилями 27:47 - вотчинг и browsersync (для стилей) 32:36 - обработка html через file-include (и вотчинг) 42:08 - простая перегонка картинок (пока без обработки) 46:10 - работа с svg-спрайтами 52:19 - работа со шрифтами 1:04:15 - простая перегонка ресурсов 1:07:45 - работа с js (webpack-stream) 1:19:48 - делаем build-версию (сжимаем все сильнее подключаем tinypng) 1:27:52 - деплой верстки на хостинг 1:32:17 - как пользоваться Gulp на других проектах, как запустить сборку в другом месте 1:34:44 - показываю устройство моих файлов в базовой сборке 1:38:00 - заключение ВАЖНО! Я изменил сборку совсем чуть-чуть, после видео, когда протестил ее побольше и увидел небольшую проблемку - при любой ошибке js-кода сборка вылетала. Исправление уже есть по ссылке на github ниже. Я добавил следующий код, чтоб ловить ошибки, не убивая сборку: .on(’error’, function (err) { (’WEBPACK ERROR’, err); (’end’); // Don’t stop the rest of the task }) Полезные ссылки: - исходники из видео на GitHub - сайт - сайт gulp @artvaleyev/gulp-webpack-jquery-4251c58c8946 - по настройке webpack-stream Использованные плагины: Поддержать канал: Мой блог: Мой сайт: Канал в телеграм: Чат для верстальщиков: Тема VS Code: One Monokai Шрифт VS Code: Consolas, ’Courier New’, monospace #maxgraph #gulp