Автор оригинала: Junior Espérant Gantin.
Masonite – это красиво созданный веб-фреймворк для Python. Мы обычно используем такие файлы, как CSS, JavaScript и файлы изображений, известные как Web assets , чтобы наше веб-приложение выглядело великолепно.
В этой статье я покажу вам, как вы можете использовать Laravel Mix для обработки и компиляции активов в вашем Masonite веб-приложении.
Laravel Mix делает компиляцию активов невероятно простой. Использование Laravel Mix с Masonite действительно простая задача. Вот и все!
Прежде чем мы начнем, создайте новый проект масонита. Просто установите БУФЕР ОБМЕНА Masonite под названием craft .
$ pip install masonite-cli $ craft new masonite_laravel_mix $ cd masonite_laravel_mix $ craft install
Laravel Mix можно использовать для любого типа приложений, а не только для приложений Laravel. Для начала просто установите laravel-mix в качестве зависимости от нашего проекта.
$ npm install laravel-mix
Поместите конфигурационный файл webpack в корень нашего проекта.
$ cp node_modules/laravel-mix/setup/webpack.mix.js .
Затем добавьте этот пример сценария в webpack.mix.js как Laravel делает.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Это определение нашего конвейера активов. Пришло время добавить некоторые скрипты npm .
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --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 --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
Я только что скопировал эти сценарии npm из репозитория Laravel – снова 😅 . Этот скрипт помогает в компиляции активов для разработки или производства. Как вы можете видеть, вам нужно установить cross-env, чтобы он хорошо работал.
$ npm install cross-env
Теперь, когда мы проделали всю тяжелую работу, давайте перейдем к простому html-файлу.
... ... ...
Простая вещь, чтобы заставить все это работать, – это создать псевдоним шаблона. Все конфигурации, относящиеся к статическим файлам, можно найти в config/storage.py . В этом файле мы добавим константу в СТАТИЧЕСКИЕ ФАЙЛЫ, которая является просто словарем:
STATICFILES = {
# folder # template alias
'public': 'public/'
}
Мы сделали это 🎉 🎉 🎉 ! Вы должны увидеть экран, похожий на этот:
Вы можете посмотреть этот репозиторий , где я добавляю Bootstrap в качестве зависимостей и использую его в качестве примера!
Надеюсь, эта статья помогла вам понять, как Masonite и Laravel Mix можно использовать вместе для обработки и компиляции активов. Если вы хотите внести свой вклад или заинтересованы в разработке Masonite, то обязательно присоединяйтесь к репозиторию Slack или star Masonite на GitHub.