Основы Laravel Mix

Ромчик
0

Фишки LaravelДоброго времени суток. В данной статье мы рассмотрим основы Laravel Mix. Laravel Mix – это настройка над настройкой Webpack. Webpack – это инструмент сборки. Т.е. если нам, например, необходимо минимизировать CSS или JS файлы, то Webpack нам поможет. Что такое Webpack и для чего он нужен Вы можете прочитать на официальном сайте webpack. Но настройка webpack сложный процесс и тут нам на помощь приходит Laravel Mix, который с помощью простого АПИ позволяет нам легко настроить Webpack (тут нужно оговориться, позволяет настроить основные и часто используемые моменты, например, компиляция SASS). И так давайте приступим.

Первое, что нам необходимо сделать это проверить установлен ли у нас node и npm. Для этого в терминале запустите команды:


node -v

npm -v

В моем случае установлено. Если вы еще не установили, то как установить node можно прочитать тут, а установку npm тут.

Теперь переходим к установке Laravel Mix

Установка Laravel Mix

Тут чуть сложнее. Точнее сложнее для пользователей Windows. В Laravel из коробки входит файл package.json, в котором прописаны все необходимые пакеты. И для пользователей UNIX подобных систем достаточно в терминале, в корне нашего проекта выполнить следующую команду:


npm install

Или, что аналогично:


npm i

А вот для пользователей Windows могут возникнуть проблемы, поэтому:

  1. Пользуйтесь homestead (это коробка vagrant). Что такое homestead и как его установить вы можете прочитать в статье «Установка Homestead».
  2. В качестве терминала используйте git bash или PowerShell
  3. И при запуске команды npm install используйте ключ —no-bin-links

npm install --no-bin-links

И все равно вам не избежать ошибок. В одном случае помогает команда (кстати мне чаще всего):


npm rebuild

В другом случае переустановка пакета cross-env


npm install --save-dev cross-env

Нужно смотреть на вывод ошибок.

Запуск Laravel Mix

У нас есть два основных скрипта, точнее их больше, но для начала нам понадобятся два (и еще четыре «вспомогательных»)

  1. development – скрипт запускает все задачи
  2. production – скрипт запускает все задачи и минимизирует файлы
  3. dev – это вспомогательный скрипт, который запускает скрипт development (программисты ленивый народ, запись npm run dev короче записи npm run development
  4. prod – это вспомогательный скрипт, который запускает скрипт production (аналогично предыдущему)
  5. watch – вспомогательный скрипт, который запускает скрипт development с ключем —watch, при разработке мы часто редактируем файлы, ключ watch отслеживает изменения и тут же компилирует.
  6. watch-poll – вспомогательный скрипт, аналогичный скрипту watch, только запускает development —watch-poll (на некоторых windows машинах ключ watch не работает и на помощь приходит watch-poll)

Ну, вот с запуском Laravel Mix мы разобрались.

Настройка Laravel Mix

Если мы зайдем в настройку Laravel Mix ( в корне нашего проекта webpack.mix.js), то увидим строку:


mix.js('resources/assets/js/app.js', 'public/js')

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

mix.js позволяет нам скомпилировать указанный файл (‘resources/assets/js/app.js’) и куда его положить (‘public/js’). Отлично, но это не все. Вот магия:

  • поддерживает синтаксис ES2015
  • поддержка модулей
  • компиляция файлов .vue

Для работы со стилями:

  • sass
  • less
  • stylus
  • styles (простой CSS)

Пример для sass мы уже видели выше. Если нам нужно переопределить некоторые опции, то мы можем передать их третьим параметром:


mix.sass('resources/assets/sass/app.sass', 'public/css', {

precision: 5

});

Простое копирование файлов и папок:


mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

Копирование папок


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

Автоматическая перезагрузка браузера

Для включения автоматической перезагрузки браузера при изменении файлов необходимо добавить:


mix.browserSync('my-domain.dev');

В my-domain.dev подставляем ваш.

Отключение сообщений

По умолчанию при выполнении задачи Laravel Mix выводит сообщение об успешном или не успешном выполнении. Для отключения данных оповещений используйте:


mix.disableNotifications();

Заключение

Мы с вами рассмотрели установку Laravel Mix, решение некоторых проблем, связанных с установкой для Windows и основные настройки Laravel Mix. Более подробно о возможностях Laravel Mix (например, мы не рассмотрели версионность файлов для кеширования) вы можете прочитать на сайте с официальной документацией

 

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика