Сборка assets в Masonite

Masonite использует Laravel Mix, который обеспечивает простой способ сборки assets, даже лучше, чем простые SASS и LESS. Однако вам не нужно быть экспертом ни в Laravel Mix, ни в NPM, чтобы компилировать assets.

Начиная

Для начала мы можем просто запустить установку с помощью NPM:

npm install

Это установит всё, что вам нужно, чтобы начать сборку.

Конфигурация

Настройки конфигурации будут сделаны внутри файла webpack.mix.js, расположенного в корне проекта.

Для вас уже есть пример настройки конфигурации, который выглядит следующим образом:

webpack.mix.js

//..

mix.js("resources/js/app.js", "storage/compiled/js")
  .postCss("resources/css/app.css", "storage/compiled/css", [
    //
  ]);

//..

Это переместит 2 файла, resources/js/app.js и resources/css/app.css, и скомпилирует их оба в каталог storage/compiled.

Не стесняйтесь менять каталоги, в которые компилируются файлы. Для получения дополнительной информации о конфигурации см. Документацию по Laravel Mix

Установка TailwindCSS

Вы можете просто следовать инструкциям по настройке TailwindCSS в официальной документации TailwindCSS.

Установка Vue

Следуйте инструкциям в документации по поддержке Laravel Mix Vue.

Компиляция

Теперь, когда мы всё настроили, мы можем скомпилировать assets.

Сделаем это, запустив:

npm run dev

Будут скомпилированы assets и помещены в каталоги, которые вы указали в файле конфигурации.

Вы также можете настроить NPM на ожидание изменений и перекомпилировать их при обнаружении изменений в файлах. Это похоже на автоматическую перезагрузку сервера.

Для этого просто запустите:

npm run watch

Управление версиями

Laravel Mix может позаботиться о хэшировании файлов для продакшена, добавив суффикс хэша к вашим ассетам, чтобы автоматически очищать кеш при загрузке ассетов.

Чтобы включить, добавите следующее в свой файл webpack.mix.js:

webpack.mix.js

//..

if (mix.inProduction()) {
  mix.version();
}

//..

Подробнее об этой функции см. в разделе управление версиями в Laravel Mix.

После того как Laravel Mix всё скомпилирует, вы не сможете узнать точное имя файла (из-за хеша), которое вы должны использовать в своих представлениях для ссылки на ассеты.

Вы можете использовать Masonite хелпер mix(), чтобы указать правильный путь к файлу ассетов.

<script src="{{ mix('resources/js/app.js') }}"></script>