Mix Laravel

Это современный инструмент для сборки внешнего интерфейса, который обеспечивает чрезвычайно быструю среду разработки и объединяет ваш код для производства. При создании приложений с помощью Laravel вы обычно будете использовать Mix для объединения файлов CSS и JavaScript вашего приложения в готовые ресурсы.

Установка

Перед установкой нужно убедиться, что установлен Node и менеджер пакетов npm. Проверить можно с помощью двух команд:

node -v

npm -v

Настройка

У меня сразу после установки в папке resources/css лежит пустой файл app.css. Именно его и подключим к проекту, хотя имя файла может быть любым.

Файл в корне webpack.mix.js служит для указания того, что будет входить в сборку проекта на Laravel.

После того, как файл со стилями CSS будет подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта. Для этого нужно отредактировать файл webpack.mix.js, который находится в корневой директории проекта.

Для подключения одного файла CSS к проекту нужно в этом файле webpack.mix.js прописать нужную команду.

Для CSS файлов:

mix.styles('resources/css/app.css', 'public/css/moonbase.css')

Где:

1. resources/css/app.css это файл, который требуется подключить к проекту (с полным путём к нему)
2. public/css/moonbase.css это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все стили CSS)

Для JS файлов:

mix.js('resources/js/metrika.js', 'public/js/moonbase.js')

Загрузка скриптов и стилей

Всё, что осталось сделать, это в шаблон сайта вписать подключение скомпилированного файла с CSS стилями (или нескольких файлов в зависимости от функционала страниц проекта).

<link href="/css/moonbase.css" rel="stylesheet" />

Запуск

Есть два способа запустить Mix.

Вы можете запустить сервер разработки с помощью dev команды, которая используется исключительно при локальной разработке. Сервер разработки автоматически обнаружит изменения в файлах и отразит их в открытых окнах браузера, файлы отдаются по отдельности и они не скомпилированы::

npm run dev

Для запуска в режиме продакшен, нужно запускать production команду, которая создаст постоянные версии в папке public/build/assets скомпилированных файлов:

npm run production

Компиляция нескольких файлов

Для компиляции нескольких файлов с CSS стилями в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:

mix.styles([
    'resources/css/file1.css',
    'resources/css/file2.css',
    'resources/css/file3.css'
], 'public/css/all.css');