Back to top

Компиляция 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
22 января 2018 г.