viteでphpの変更を監視してliveReloadしたい

Question

実現したいこと

vite-plugin-live-reloadライブラリを使用して、viteで立ち上げている環境においてphpファイルに変更があったらliveReloadが走るようにしたい。

発生している問題・分からないこと

[vite] page reload wp-content/themes/mytheme/home.php

phpファイルの変更を監視することはできているが、ライブリロードが効かない。
以下にvite.config.jsを添付します。

該当のソースコード

import { defineConfig } from 'vite';
import liveReload from 'vite-plugin-live-reload';
import pug from 'pug';
import path from 'path';
import fs from 'fs-extra';

const outDir = 'dist/wp-content/themes/mytheme';
const srcDir = 'src';

function compilePugToPhp() {
  const pugFiles = fs.readdirSync(srcDir + '/pug').filter(file => path.extname(file) === '.pug');
  
  pugFiles.forEach(file => {
    const filePath = path.join(srcDir + '/pug', file);
    const php = pug.renderFile(filePath, {
      basedir: srcDir,
      filters: {
        php: (text) => {
          return `<?php ${text} ?>`;
        }
      }
    });
    const outPath = path.join(outDir, path.basename(file, '.pug') + '.php');
    fs.outputFileSync(outPath, php);
  });
}

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: 'localhost',
    cors: true,
    port: 3000,
    hmr: {
      host: 'localhost',
    },
    proxy: {
      '/': {
        target: 'http://localhost:8888',
        changeOrigin: true,
      }
    },
    watch: {
      usePolling: true,
      include: `${srcDir}/pug/**/*.pug`,
    },
  },
  plugins: [
    {
      name: 'pug-transformer',
      buildStart() {
        compilePugToPhp();
      },
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.pug')) {
          compilePugToPhp();
        }
      }
    },
    liveReload(`${outDir}/**/*.php`),
  ],
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

phpファイルに対してviteを使用するとなると、lalavel viteの記事が多く私のような事例の結果は得られませんでした。

補足

特になし

Comments

[tezcello]

マルチポストを全否定はしませんが、好まれない場合が多いです。
少なくても、後始末はキチンとしましょう。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14302585444

[fuuta0201]

tezcello様　コメント、ご指摘ありがとうございます。

google検索やAI、エンジニア向けの記事、公式ドキュメントなど調査を踏まえた上で行き詰まってしまい、今回のケースのようなあまり事例がないものではご回答いただける可能性が低いと考えて本サイトともう一つにて質問してしまいました。

マルチポストがマナー違反と言われる所以については理解いたしました。今後はマルチポストは避け、本質問に関しては回答いただけた場合後始末をいたします。

[tezcello]

> 本質問に関しては回答いただけた場合後始末をいたします。
両方の質問でキチンとやってくださいね。

> phpファイルの変更を監視することはできているが、ライブリロードが効かない。
だとしたら、JavaScript（Vite）の問題ではありませんか？
PHPとして出来る事は無い（＝PHPはカテ違い）様に思います。

> wordpressのテーマ開発
PhpStormは、WordPressのアレコレに対応している様ですし、「Live Edit」も出来る様です。
お試し版もあるので、思った様な事が出来るならIDEとして採用されては？

Answer 1

liveReloadが効かなかったのでvite-plugin-browser-syncを使用しました。