Laravel Mix: настройка, плагины, сборка JavaScript и CSS, оптимизация картинок, создание SVG спрайта

Привет, друзья!

В данном видео я поделюсь с Вами своим личным опытом настройки Laravel Mix. На конкретном примере мы разберем такие задачи, как сборка JS/CSS/SASS/SCSS, оптимизация изображений, использование WEBP, генерация SVG спрайта, версионность статики, поддержка устаревших браузеров и т.д.

0:00 Вступление
1:15 Создание нового проекта
3:53 Установка дополнительных пакетов
5:50 Используемые пакеты и плагины
9:11 Поддержка браузеров, browserslist
11:09 Структура демо проекта
12:45 Конфигурация Lavarel Mix
14:18 Настройки для сборки JavaScript
17:31 Настройки для сборки стилей SCSS
21:33 Настройки для генерации SVG спрайта
24:37 Настройки для оптимизации изображений
27:12 Настройки для конвертации в WEBP
27:56 Версионность статики
28:51 Подробнее про демо проект
29:09 Скрипты в демо проекте
31:04 Стили в демо проекте
32:09 Верстка в демо проекте
35:46 Команды терминала
37:19 Демонстрация результата
42:04 Нюансы в Laravel некоторых версий

Приятного просмотра!

#laravel #laravelmix

[СергейШахворостов-вш]

Классный урок, очень полезный! Особенно понравилась часть про кроссбраузерность и svg спрайты. Буду смотреть остальные уроки.

[kulek-tutiny]

"Интернет Экспойлер" - сначала думал, что послышалось, но потом понял, что нет =)

[hjetwd]

классное видео, спасибо! я заметил, что ты пишешь <use xlink:href="..." /> атрибут xlink:href является устаревшим со статусом deprecated, можно писать просто href="...", еще одна фишка - если нет изменяемых картинок, в зависимости от разрешения экрана в <picture> (это когда в <source> добавляют медиа запросы), а есть просто 1 картинка с разными расширениями, можно просто отдавать её через <img> через php (laravel же на php работает), с проверкой браузерной поддержки форматов изображений, типа так -

if ( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// webp is supported!
}

т.е. отдавать сразу картинку, сократив html код еще сильнее. есть поддержка avif? отдавать его, нет - webp, нет?... всплакнуть и отдать jpg

з.ы. а можно добавить версионность к svg спрайту? типа <use href="{{ }}#icon--phone" />

[ИгорьВиткин-ья]

У тебя отличные уроки. Ждем продолжений

[Данил-уыб]

Спасибо за сборку и такое подробное объяснение

[maximkiselev]

спасибо, хороший обзор. взял на вооружение некоторые фишки сборки

[aleksandrnenashev]

Здравствуйте, подскажите пожалуйста у меня Laravel v9.24.0 (PHP v8.1.9) но файла webpack.mix.js там нет

[powered]

По настройке никаких преимуществ по сравнению с gulp я не увидел, может я не прав поправьте. Главная страница на php может в этом его отличие от gulp c html?

[romanhonchar]

При вводе в консоль пишет что "laravel" не является командой. То есть мне нужно сперва установить сам Laravelна ПК?

[Огент-тг]

А по человечки можно подключить css, js? asset('css/style.css') не работает как и url(''). Мне бекенд нужен а не эти заморочки со сборкой стилей

[oracleh]

Жили не тужили, а тут эксполер и брозеры. А так спасибо, все понятно.

[Моястраница-эн]

У кого возникнут проблемы со сборкой, если вдруг будет выводится ошибка
HookWebpackError: Plugin name should be specified

то нужно немного изменить параметры в webpack.mix.js

...

svgo: {
plugins : [
{
'name': 'removeStyleElement', // Удаляем из svg теги <style>
},
{
'name': 'removeAttrs',
'params': {
attrs: ["fill", "stroke"] // Удаляем часть атрибутов для управления стилями из CSS
}
},
]
},
...

[ВладИльин-жъ]

Большое спасибо! Очень полезно, но уж очень мелко, скачал 1080p 60fps, но все равно лайк

[NewtMertensiella]

слушать супер, голос приятный, грамотная речь почти без эээ и слов-паразитов. А смотреть конечно тяжело))

[fblvfvt]

Что делать если imagemin-mozjpeg работает на es module?

[goodhoor]

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

[michaelv]

Спасибо большое разобрался, перешел с gulp. Cделал для своих проектов в October cms (Laravel), вот только одно смущает, тут же можно при npm run watch сделать так что бы он отслеживал, что изменено? а то он после сохранения того же scss компилирует заново всю папку dist включая изображения? А когда проект уже не маленький это время и не мало, пока он все это заново сохранит!

[goodhoor]

Copy webpack plugin уже в коробке mix.copyDirectory('assets/img', 'public/img');

[ivan.silicin]

Подскажите пожалуйста, у меня сразу не принимает команду "npm i". Что делать? У вас на видео эта команда работает. Нужно ещё что-то установить?

[romanalekseevich]

Епать колотить мои глаза, ну что я такого плохого Вам сделал, за что? С планшета не реально выдержать эти муки, скоро буду плакать кровью.

Просто PurgeCSS под продакшен с полифилом, остальное под стили шляпа. Картинки надо беком делать на Ларе, а не руками собирать разработчику.