Как использовать Laravel.mix? Короткий гайд

Оригинал: ссылка

Перевод: Святослав Торн

Laravel.mix - это мощная обертка над Webpack'ом, благодаря которой мы можем управлять скриптами и стилями нашего приложения. Laravel.mix может работать не только в составе Laravel, его можно настроить для работы даже с WordPress. Laravel.MIX API - очень прост и интуитивно понятен, это позволит вам съэкономить кучу времени на настройке webpack.

Перед началом работы убедитесь что у Вас установлен  npm

 Laravel и Laravel.Mix

Для начала с Laravel.MIX запустите команду npm install, npm подтянет все пакеты в папку node_modules. Хорошо, теперь в корневой директории нашего проекта есть файл webpack.mix.js примерно с таким содержимым:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Из файла видно, что к нашей константе mix мы можем цеплять методы один за другим. Рассмотрим основые вохможности для миксования ресурсов.

CSS Preprocessors

Вы можете писать стили с помощью SASS, Less, Stylus и PostCSS без лишних хлопот. Вот простой пример с SCSS. Нам необходимо добавить нужный метод в наш файл:

const mix = require("laravel-mix");
mix.sass("resources/sass/app.scss", "public/css");

Сейчас мы можем запустить команду npm run watch и Laravel.mix будет слушать изменения в файле resources/sass/app.scss и компилировать его автоматически в public/css/app.scss. На данный момент файл не минимизирован, чтобы его минимизировать для продакшена, просто выполним команду npm run prod. Если вы не работаете с препроцессорами и лишь хотите объеденить и минимизировать свои CSS стили - Plain CSS

Доступные методы: Less, Sass, Stylus, Plain CSS.

JS

Работа с JavaScript файлами абсолютно аналогична приведенному выше примеру. У вас есть куча исходных js файлов и один итоговый файл. Разнообразие методов и их настройки больше чем у стилей. Расмотрим некоторые из них.

Самый простой метод это mix.js(src | [src], output) - невинный на вид метод, который дает вам, следующие возможности:

• ES 2017 + компиляция
• Сборка и компиляция компонентов Vue.js
• Горячая замена модуля (возможно не точный перевод - Hot module replacement)

Все это значить что вы можете писать на современном JS, онг будет скомпилирован, минимизирован и объеденен - все это после запуска команды npm run prod.

Вот небольшой пример:

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

// 1. Один исходный файл
mix.js(
  "resources/js/app.js",
  "public/js",
);

// 2. Несколько исходный файлов
mix.js(
  ["resources/js/bootstrap.js", "resources/js/app.js"],
  "public/js/app.js",
);

Ознакомиться со всеми методами можно тут.

Горячая перезагрузка с BrowserSync (синхронизация браузера)

Запуск BrowserSync позволяет быстро перезагрузить ваши скрипты, стили и Blade-файлы. Благодаря этому разработка происходит быстрее. Его использование выглядить очень очевидно:

const mix = require("laravel-mix");
mix.browserSync("http://127.0.0.1:8000"); 

Просто запустите npm run watch и начинайте творить крутые вещи!

Подключение Asset'ов и управление версиями

Laravel.mix упрощает работу с версионированием. Вместо управления версиями с помощью хэш строки, вы можете использовать сппециальный метод mix() в свой Blade файл:

<link rel="stylesheet" href="{{ mix('css/app.css') }}"> 

После выполнения команды npm run prod это будет вышлядеть как то так:

 <link rel="stylesheet" href="/css/app.css?id=58852bd94d48b8bf5cb6">

Чтобы иметь возможность управлять версиями добавьте в наш конфигурационный файл webpack.mix.js новую строку:

const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js");
mix.sass("resources/sass/app.scss", "public/css");
mix.browserSync("http://127.0.0.1:8000");
mix.version();

Для работы вышеприведенного кода не забудьте запустить команды php artisan serve и npm run watch

Список доступных методов: https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.mix.js