Компиляция CSS- и JS-файлов в Laravel
Фреймворк Laravel позволяет настроить компиляцию CSS и JavaScript файлов с помощью инструмента сборки Webpack. Благодаря системе Laravel Mix, разработчики получают возможность использования миксинов и переменных для работы с таблицами стилей, а также синтаксис ES2015, компиляцию VUE-файлов и сжатие конечных файлов JS-приложений.
Для работы команд компиляции в среде разработки должны быть установлены Node.js и NPM. Проверить их наличие можно выполнив в терминале команды:
node -v
npm -v
По-умолчанию, оба «расширения» присутствуют в среде разработки Laravel Homestead и Laragon, и единственное, что остается для работы компилятора — это установка в командной строке Laravel Mix:
npm install
По-умолчанию в файле webpack.mix.js проекта Ларавел уже настроены пути для сбора и компиляции файлов:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Исходные JS- и SASS-файлы хранятся в директории resources/assets, а публичные скомпилированные версии таблиц стилей и скриптов размещаются в директории public.
Запуск компилятора осуществляется в терминале с помощью команды:
npm run dev
Эта команда обновляет указанные файлы проекта в директории public.
Помимо единоразовой компиляции файлов в Laravel Mix есть специальная команда, которая позволяет установить наблюдение за изменениями в исходных JS- и SASS-файлах из директорий resources/assets и, в случае их изменения, автоматически компилировать и обновлять публичные файлы:
npm run watch