browserSyncを使ってwordpress開発環境にlivereloadを導入する

Wordpressの開発環境だと、MAMP等を使ってphpの動くサーバー上で開発する必要があるため、
node製のbrowserSync.serverを使うことができない。

従って、livereloadを導入するにはphpファイルの中にreload用のjsスクリプトを埋め込んでおく必要がある。

以下はlocalhost環境のときだけbrowserSyncのスクリプトを埋め込むスニペット。

index.php

<?php
if ( strpos( $_SERVER["HTTP_HOST"], 'localhost' ) !== false ) : ?>
    <script>
        document.write("<script async src='http://HOST:35729/browser-sync/browser-sync-client.2.11.2.js'><\/script>".replace("HOST", location.hostname));
    </script>
<?php
    endif;
?>

あとは通常のフロントエンド開発時と同様に、watchでファイル変更を検知したタイミングでbrowserSync.reloadを実行するようなタスクを記述すればok