Laravel Mix ранее был известен как Elixir и поставлялся в виде отдельного плагина для Laravel. С версии 5.4 он был включён в официальную поставку фраемворка и в этой статье я пробегусь по наиболее важным моментам плагина и мы научимся, как воспользоваться всеми его преимуществами.
Если говорить кратко, то самая большая разница между Elixir и Laravel Mix в том, что последний идёт в Webpack, в то время как первый основан на Gulp. Но в целом, Laravel Mix более эффективное и элегантное решение для сайта.
В этой статье мы пробежимся по основам:
Главная причина, по которой я люблю Laravel Mix в том, что он не меняет структуру папок вашего проекта. Вы ссылаетесь на файлы так, как вы хотите и ваша структура папок может быть любой.
Это означает, что по сути вы можете пользоваться Laravel Mix за пределами вашего проекта, не меняя основную конфигурацию.
Ещё одна очень полезная вещь - это так называемый Code Splitting. Laravel Mix умело работает с Javascript, не только минифицируя его, но и адаптируя под версию 2005, гарантируя тем самым, что скрипт будет запускаться на любых браузерах.
Перед установкой нужно убедиться, что у вас установлен Node и NPM. Проверить можно, введя в браузере команды:
node -v
npm -v
Если они у вас не установлены, скачайте всё необходимое с сайта Node.js. Там есть подробная инструкция по установке.
После установки Laravel версии 5.7 устанавливается вместе с файлом package.json и внутри у нас имеется большое количество зависимостей:
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17"
}
Если вы читали документацию Laravel Mix, там говориться, что для его установки, вам потребуется ввести команду
npm install
А это повлечёт за собой установку всех этих библиотек, которых огромное количество. И многие из них нам, скорее всего, никогда не понадобятся. Особенно они не нужны, если вы планируете использовать только Laravel Mix.
Поэтому, можно привести файл package.json к такому виду:
"devDependencies": {
"laravel-mix": "^4.0.7"
}
Теперь вводим в командную строку npm install, непосредственно в папке с проектом.
для его запуска, достаточно ввести команду:
npm run dev - запускаем все задачи. Достаточно ввести команду один раз.
npm run watch - запускает все задачи и продолжает работу. И если вы изменили какой-либо файл, он производит автоматически его компиляцию. Используйте эту команду, если вам нужно внести большие правки в стили или скрипты.
npm run production - запускает все команды и производит сжатие файлов. Когда вы закончили работу над стилями и скриптами, запустите эту команду перед отправкой проекта на сервер.
Файл webpack.mix.js - по сути основной файл, в котором вы управляете Laravel Mix.
Он поддерживает Less, Sass, обычный CSS и Source Maps.
Самый простой пример:
mix.less('resources/assets/less/app.less', 'public/css');
Производит компиляцию файла resources/assets/less/app.less в public/css/app.css.
Вы можете задать другое имя файла после компиляции следующим образом:
mix.less('resources/assets/less/app.less', 'public/css/styles.css');
Если нужно произвести компиляцию нескольких файлов, то делаем следующим образом:
mix.less('resources/assets/less/app.less', 'public/css')
.less('resources/assets/less/admin.less', 'public/css');
То же самое относится и к файлам Sass, с расширением .scss и .sass.
Для объединения нескольких файлов CSS в единый файл (очень полезная функция), вы можете использовать mix.combine. Это будет выглядеть так:
mix.combine([
'public/css/vendor/mormilize.css',
'public/css/vendor/videojs.css'
], 'public/css/all.css');
По умолчанию работа с этим типом отключена, потому что они очень сильно замедляют процесс компиляции и требуют больше ресурсов процессора.
Чтобы их активировать, нужно добавить mix.sourceMaps() в файл webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
.sourceMaps();
Если вы просто введёте этот код в файл webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js');
то вы получите
Очень крутой инструмент, но самое интересное - это разделение кода.
Например, представьте, что вы пишете функционал и вам необходимо использовать в вашем скрипте несколько библиотек. Кроме того, у вас есть свой скрипт, который использует несколько модулей в разных файлах.
Если вы будете просто использовать mix.js для компиляции скриптов, вы получите огромный файл размером несколько мб. И каждый раз, когда вы вносите изменения в скрипты, посетители будут вынуждены грузить огромный файл не из кеша, а с вашего сервера.
Инструмент разделения кода или code splitting позволяет сокращать размер файла и выделять ваш код из библиотек. Например, если вы изменили свою часть кода, браузер будет грузить только ваш кусок, а не библиотеки.
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
Метод extract принимает в виде массива все библиотект или модули, которые вы хотели бы извлечь в файл vendor.js.
Когда вы запустите эту команду, она сгенерирует следующие файлы:
- public/js/manifest.js
- public/js/vendor.js - библиотеки
- public/js/app.js - ваш скрипт.
Чтобы избежать ненужных ошибок, убедитесь, что на странице вы подгружаете файлы в нужном порядке:
<script src="{{asset('js/manifest.js')}}"></script>
<script src="{{asset('js/vendor.js')}}"></script>
<script src="{{asset('js/app.js')}}"></script>
Как и Laravel Elixir, Laravel Mix позволяет копировать файлы:
mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
Вы можете копировать как файлы, так и директории. Полезно, когда вы хотите скопировать шрифты, CSS или JS файлы из директории node_modules в каталог public.
Ещё один полезный инструмент - это управление версиями. Так как файлы в браузере кэшируются определённый период времени, бывает невозможно заставить браузер получить последнюю версию файла или подсказать, что файл был изменён.
Управление версиями позволяет привязать уникальный хэш-идентификатор к файлу после каждого его изменения, чтобы браузер загрузил свежую версию.
mix.js('resources/assets/js/app.js', 'public/js')
.verstion();
После запуска этой задачи вы не будете знать точного имени файла, так как оно будет динамическим. Для этого у laravel есть специальная функция, которая автоматически получает нужное имя файла:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
По умолчанию, после каждого завершения задачи, Laravel Mix показывает уведомления на рабочем столе. Меня они очень раздражают. Оключить их можно следующим образом:
mix.disableNotifications();
Как обычно, это всё вносится в файл webpack.mix.js.
Благодарю за прочтение материала, если появились вопросы, можете смело их задавать.
My most popular posts
I started my own business and intentionally did my best to work from anywhere in the world. Sometimes I sit with my office with a large 27-inch monitor in my apartment in Cheboksary. Sometimes I’m in the office or in some cafe in another city.
I have been working at a remote place for a long time - about 10 years. During this period, I implemented about 7 projects and provided dozens of consultations.
I am a programmer. I am an entrepreneur in my heart. I started making money from the age of 11, in the harsh 90s, handing over glassware to a local store and exchanging it for sweets. I earned so much that was enough for various snacks.
I will make time for your project. Knowledge of Vtiger CRM, SuiteCRM, Laravel, and Vue.js. I offer cooperation options that will help you take advantage of external experience, optimize costs and reduce risks. Full transparency of all stages of work and accounting for time costs. Pay only development working hours after accepting the task. Accept PayPal and Payoneer payment systems. How to hire professional developer? Just fill in the form
