Главная > Блог > Web-разработка > Yii2 и Laravel >

Laravel Mix — сборка фронтенда

24.01.2021

Теги: CSS • JavaScript • Laravel • Web-разработка • Теория • Фреймворк

Laravel Mix ранее был известен как Elixir и поставлялся в виде отдельного плагина, но с версии 5.4 он был включён в официальную поставку фреймворка. Разница между Elixir и Mix в том, что последний является надстройкой над Webpack, в то время как первый основан на Gulp. Laravel Mix умело работает с JavaScript, не только минифицируя его, но и адаптируя под версию ECMAScript 5, гарантируя тем самым, что скрипт будет запускаться на старых браузерах.

Установка

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

> node -v # какая версия node установлена
v14.15.1

> npm -v # какая версия npm установлена
6.14.9

Сразу после установки Laravel в корне проекта будет файл package.json. Внутри секции devDependencies большое количество зависимостей, и среди прочих — пакет laravel-mix.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.12"
    }
}

Для установки laravel-mix (и всех прочих пакетов из package.json) — нужно выполнить команду из директории проекта:

> npm install

Запуск

Запустить все задачи:

> npm run dev

Запустить все задачи и следить за изменениями файлов:

> npm run watch

Если какой-либо файл был изменен, он производит автоматически его компиляцию. Эту команду есть смысл использовать, если нужно внести большие правки в стили или скрипты.

Под Windows watch иногда не работает (не отслеживает изменения файлов), в этом случае можно использовать watch-poll — который запускается каждые несколько секунд и проверяет изменения файлов.

Запустить все задачи и минифицировать файлы:

> npm run prod

Настройка

Сразу после установки Laravel в директории проекта есть файл webpack.mix.js — это и есть файл конфигурации mix, в котором мы ставим задачи — что надо делать при запуске.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Изначально после установки Laravel в файле файл webpack.mix.js есть всего две задачи — создать public/js/app.js из resources/js/app.js и создать public/css/app.css из resources/sass/app.scss.

Для работы с LESS есть метод less(), который аналогичен методу sass() для работы с SASS.

Использование метода js() позволяет произвести транспиляцию в версию ECMAScript 5, минифицировать js-код, произвести сборку модулей и получить на выходе JavaScript, который может работать в старых браузерах.

Для объединения и минификации нескольких js-файлов предназначен метод scripts():

mix.scripts(
    ['public/js/admin.js', 'public/js/dashboard.js'],
    'public/js/all.js'
);

Для объединения и минификации нескольких css-файлов предназначен метод styles():

mix.styles(
    ['resources/css/mormilize.css', 'resources/css/common.css'],
    'public/css/all.css'
);

С помощью Laravel Mix можно копировать как файлы, так и директории. Это полезно, когда нужно скопировать шрифты, css или js-файлы из директории node_modules в директорию public.

mix.copy('node_modules/some-module/style.css', 'public/css/some-module.css');

При копировании директории метод copy() сделает структуру директории более плоской. Если нужно поддерживать оригинальную структуру директории, следует использовать метод copyDirectory().

mix.copyDirectory('resources/img', 'public/img');

По умолчанию работа с source maps отключена, потому что это очень сильно замедляют процесс компиляции и требуют больше ресурсов процессора — но это всегда можно изменить.

mix.js('resources/js/app.js', 'public/js').sourceMaps();

Установить все пакеты из секций dependencies и devDependencies файла package.json:

> npm install

Установить все пакеты из секции dependencies файла package.json (для production сервера)

> npm install --production

Установить пакет package-name, но не добавлять его в файл package.json:

> npm install package-name --no-save

Установить пакет package-name и добавить в секцию devDependencies файла package.json:

> npm install package-name --save-dev
> npm install -D package-name

Установить пакет package-name и добавить в секцию dependencies файла package.json:

> npm install package-name --save-prod
> npm install -P package-name
> npm install package-name

Удалить пакет package-name, но не удалять его из файла package.json:

> npm uninstall package-name

Удалить пакет package-name и удалить его из секции devDependencies файла package.json:

> npm uninstall package-name --save-dev
> npm uninstall -D package-name

Удалить пакет package-name и удалить его из секции dependencies файла package.json:

> npm uninstall package-name --save
> npm uninstall -S package-name

Дополнительно

Поиск: CSS • JavaScript • Laravel • Web-разработка • Фреймворк • Mix • LESS • SASS • SCSS • Frontend • Фронтенд • Сборка • Node • npm • Теория