Gulp сборка для верстки сайтов. Ускоряем процесс верстки сайтов. Обновление 2024

Gulp сборка для верстки сайтов. Обновление Gulp сборки. В этом видео я презентую обновленную сборку для HTML верстки сайтов. Улучшена работа с графикой. Лучшее качество при оптимизации.

Что добавлено:
- Умеет авто-подключать webp формат в т.ч. и для retina графики.
- Собирает SVG спрайты.
- Производит автогенерацию и автоподключение шрифтов.
- Автозамена путей в html и scss.
- Исправлен баг с ошибкой при при разрыве строки в теге img.

Стартовый проект для html верстки. Добавлена документация по сборке и SCSS сниппеты для более быстрой верстки.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 14 Октября 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 21 Октября 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

ТАЙМ КОДЫ:

00:00 Введение
00:56 Начало. Подготовка. Установка
06:04 Запуск сборки
08:06 Контейнеры
10:36 Быстрые медиа запросы
17:05 Фоновые изображенияв SCSS
21:52 Автоисправление путей в HTML и SCSS
24:23 Генерация SVG спрайтов
33:44 Оптимизация графики
41:03 Авто-конвертация и авто-подключение шрифтов
45:39 Gulp file include
47:11 Типограф
48:17 Сниппеты
54:00 Где скачать сборку.

[neleaonila]

Я с наслаждением вкушаю плоды ваших экспериментов и исследований.
Я даже не знаю, каким мерилом мерить мою благодарность за ваш труд.

[beegoodb]

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

[sirflexsir]

Сборка огонь 👍 Единственное, что подправил это перевел на импорты и добавил возможность заливать фалы на хостинг по ftp ( vinyl-ftp, gulp-util)

[vasya]

Gulp-ом не когда не пользовался, но увидел видео решил понажимать и понял что не так и тяжело, Спасибо за урок.

[SEOdude-hl]

Хорошая сборка. А при небольшом допиле под себя, получается прекрасная. Юра, спасибо!

[artimity]

не могу подключить шрифт который уже woff формата

[AnaLebjodkina]

Спасибо огромное за ваш труд! И сборка, и видео очень крутые, понятные даже для новичков. Хотела узнать, пользуетесь ли вы critical css для оптимизации и можно ли его как-то подключить к этой сборке?

[artimity]

Как выключить или удалить плагин в gulp?

[Алексей-отщ]

Поправьте ссылу на сборку под видео. Ведет на первую версию.

[Программирование-нт]

Классная сборка только не подскажете где можно почитать про автодополнение путей Решение от подписчика Max Voron. Не получается добиться корректной работы если добавляешь в папку HTML другую папку с файлом HTML и в файле ставишь ссылку на CSS

[SergiyPolar]

Доброго времени суток. В сборке папка docs переносится из папки src при работе со сборкой и в готовый проект (в папки build и docs)

[valerakozhura]

Я правильно понял, что для всех картинок теперь обязательно два варианта: 1х и 2х? я попробовал просто подключить картинку с одним форматом 1x, но какая-то библиотека создающая picture создала конечно srcset под webp x2, затем браузер посмотрев на мой 3k экран естесственно отдал приоритет ретине х2, а тут бамс, такой картинки нету)) Можно ли как-то вставлять картинки чтоб к ним не применялся picture?

[beegoodb]

Юрий здравствуйте, gulp-changed и в принципе некие другие пакеты получившие обновления за последние 4 месяца на npmjs больше не используют метод require() а импортятся, как использовать новый подход?

[ФросяБурлакова-ья]

Юрий а как очистить сборку от старых проектов

[foodreria]

У меня такой вопрос, gulp-plumber и gulp-notify работают в html? Не могу никак спровоцировать ошибку.

[blackout]

Если мне нужно, чтобы была страничка, к ней подключены другие блоки html, а к ним ещё другие блоки html и именно в такой иерархии. И их много. Мне всё совать в папку blocks?

[dokers]

Объясните новичку, для чего мне к примеру в своем пет проекте на реакте устанавливать сборщик вебпак или галп? Все ведь и так работает, и файлы организовал как обычно по compontents, pages и тд.

[sad_gary]

у меня почему-то не хочет заменять img на webm при запуске gulp docs 😐при чем не ошибок, ничего не вылетает, просто не вносит изменения в html файл

[artembats]

Пути переписываются таким образом, что в любом случае указывают на корень проекта, а как быть если структура проекта многоуровневая, допустим Как сделать так, чтобы во вложенных каталогах пути прописывались в обратную сторону ../../? (ง ͠° ͟ل͜ ͡°)ง

[Clay]

Добрый день! Спасибо за классную сборку и множество полезных фич!
Помогите, пожалуйста, решить ошибку в плагине imagemin:

Message:
The system cannot find the path specified.
Details:
errno: ENOENT
syscall: spawn