Разработка Wordpress с использованием Vite, pug, scss ⇐ Php

[Anonymous]

Содержание вопроса
Ранее я разрабатывал темы WordPress с помощью Gulp, Webpack и Docker.

Я использовал следующие языки: Pug, SCSS и JS. Однако на этот раз я попытался разработать тему WordPress с использованием Vite.js и Docker, но столкнулся с проблемой, из-за которой даже после компиляции Pug горячая замена модулей (HMR) не работала должным образом при обновлении файлов PHP. Следовательно, я попытался использовать LiveReload для мониторинга файлов PHP, но это также не вызвало перезагрузку. В каталоге моего проекта я создал папку темы и папку исходного кода.

При использовании docker-compose для WordPress и Vite для компиляции Pug, SCSS и JS выходные данные направляются в папку темы. Я хочу добиться автоматической перезагрузки в этой настройке.

Я создаю тему WordPress в каталоге dist/ с помощью Docker и запускаю сервер по адресу localhost:8000. Кроме того, я запускаю сервер Vite.js по адресу localhost:3000 для отображения сайта WordPress. Внутри каталога «src/» я создаю папки для Pug, SCSS и JS и компилирую их в файлы PHP, CSS и app.js, которые затем выводятся в тему WordPress. Я хочу отслеживать обновления файлов и перезагружать localhost:3000, но пытаюсь использовать

server.ws.send({ type: 'full-reload', path: '*' })

и LiveReload не привели к перезагрузке. Пожалуйста, дайте решение этой проблемы.
структура файла
структура файла
vite.config.js import { defineConfig } из 'vite'; импортировать мопса из «мопса»; импортировать pugPhpFilter из «pug-php-filter»; импортировать фс из «фс»; импортировать { Glob, glob } из 'glob'; импортировать liveReload из «vite-plugin-live-reload»; путь импорта, {разрешение} из «пути»; импортировать dotenv из «dotenv»; dotenv.config({путь: path.resolve(__dirname, '.env') }); const proxyPath =process.env.NODE_ENV === 'разработка'? 'http://localhost:8000': ''; const dist = './dist/wp-content/themes/' +process.env.WP_THEME; экспортировать default defineConfig({ корень: path.resolve(__dirname, './'), плагины: [ { имя: 'pugPhp', // 開発サーバー時のみ применить: «подавать», handleHotUpdate({файл, сервер }) { если ( file.endsWith('.pug') ) { console.log(`Файл Pug обновлен: ${file}`); const скомпилирован = pug.compileFile(файл, { красивая: правда, фильтры: { php: pugPhpFilter } }); константный вывод = скомпилирован (); const srcPath = path.relative(path.resolve(__dirname, './src/pug'), file); const phpFilePath = path.resolve(__dirname, dist, srcPath).replace(/\.pug$/, '.php'); fs.writeFileSync(phpFilePath, вывод); } } }, { имя: 'phpUpdated', handleHotUpdate({файл, сервер }) { если ( file.endsWith('.php') ) { console.log(`PHP-файл обновлен: ${file}`); server.ws.send({ type: "full-reload", path: "*" }); } } }, liveReload([dist+'/**/*.php']), ], строить: { outDir: path.resolve(__dirname, dist), манифест: правда, RollupOptions: { ввод: разрешить (__dirname + '/main.js') } }, сервер: { прокси: { '/': проксиПуть, }, корс: { источник: "*", }, строгийПорт: правда, порт: 3000, ведущий: правда, хмр: { хост: 'локальный хост' }, смотреть: { usePolling: правда, } }, }); docker-compose.yml версия: "3" услуги: MySQL: изображение: MySQL: 8.0 #платформа: Linux/x86_64 # имя_контейнера: '${WP_THEME}-mysql' объемы: - ./mysql_data:/var/lib/mysql # перезапуск: нет порты: - '${FORWARD_DB_PORT:-3306}:3306' среда: MYSQL_ROOT_PASSWORD: какой-нибудь WordPress MYSQL_DATABASE: WordPress MYSQL_USER: WordPress MYSQL_PASSWORD: WordPress вордпресс: зависит от: - MySQL изображение: WordPress: последний # изображение: WordPress:5.9.1 #платформа: Linux/x86_64 имя_контейнера: '${WP_THEME}-wordpress' объемы: # - ./public:/var/www/html - './dist/wp-content/themes/${WP_THEME}:/var/www/html/wp-content/themes/${WP_THEME}' - './dist/json/:/var/www/html/json/' - './php.ini:/usr/local/etc/php/php.ini' порты: - '${APP_PORT:-80}:80' # перезапуск: нет среда: WORDPRESS_DB_HOST: MySQL WORDPRESS_DB_USER: WordPress WORDPRESS_DB_PASSWORD: WordPress WORDPRESS_DB_PORT: '${FORWARD_DB_PORT:-3306}' WORDPRESS_DEBUG: 'истина' Кли: изображение: WordPress:cli имя_контейнера: '${WP_THEME}-cli' # имя_контейнера: cli объемы_от: - вордпресс зависит от: - MySQL - вордпресс команда: «--информация» Пользователь: xfs среда: WORDPRESS_DB_HOST: mysql:'${FORWARD_DB_PORT:-3306}' WORDPRESS_DB_USER: WordPress WORDPRESS_DB_PASSWORD: WordPress объемы: mysql_data: публика: .env FORWARD_DB_PORT=3333 ПРИЛОЖЕНИЕ_ПОРТ=8000 WP_THEME=тест