開発メモ：編集中のPHP・CSSをブラウザで自動更新する方法

この記事ではLocal by Flywheelで構築したWordPressサイトのテーマファイル（PHP・CSSファイル）を、Browser SyncとGulpをインストールして、ブラウザ上でリアルタイムプレビューする方法について記載していきます。

Browser Syncの最大のメリットは、例え開発環境がWindowsであっても、iPhoneさえあればSafari上でのウェブページ表示を確認できることです。

しかし、Browser SyncだけではPHPファイルを表示することができないので、今回はGulpもインストールして設定していく必要があります。

導入に必要な手順は次の４Stepです。

WP用のテーマファイル格納場所の把握
Node.jsをインストール
Browser Syncをインストール
Gulpをインストール

※VS Codeがインストール済であること、Local by FlywheelでWPサイト構築済みであることを前提としています。

では４Stepについて簡単に解説していきたいと思います。

WP用のテーマファイル格納場所の把握

Local by Flywheelで構築したWPサイトのテーマは、初期状態であれば下記のパス「themes」フォルダに保存されていると思います。

C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\themes

私の場合は「themes」フォルダの中に更に「mytheme」というフォルダを作って、こんな感じでテーマ用のファイルを配置しました。

themes
┗mytheme
　┣index.php
　┗style.css

最終的には「themes」のフォルダ内に、「package.json」と「gulpfile.js」を配置していきます。

themes
┣gulpfile.js
┣package.json
┗mytheme
　┣index.php
　┗style.css

Node.jsのインストール

Node.jsのインストール方法については、Progateさんのページでかなり丁寧に解説してくださっていますので、そちらをご参考ください。

https://prog-8.com/docs/nodejs-env-win

Gulpのインストール

Gulpのインストールについては下記を参考にしました。

【gulp4】gulpとはなにか? 環境構築してみよう windows10版 | shuu11 code

しかし手順がかなりざっくりで、初心者には厳しいものがあったので、改めて解説します。

まずはコマンドプロンプト上で、下記コマンドで先ほどの「themes」フォルダまで移動します。

cd C:\Users\ユーザー名\"Local Sites"\サイト名\app\public\wp-content\themes

※cdとはコマンドを実行したいフォルダまで移動するためのコマンド

※ユーザー名とサイト名は設定によって異なります

※Local Sitesを""で括るのを忘れずに！

次に下記のコマンドを実行してください。「themes」フォルダ内に「package.json」ファイルが生成されます。

npm init -y

次に下記のコマンドでGulp CLIとGulpをインストールします。

npm install gulp-cli gulp -D

次に下記のコマンドでGulpが正常にインストールされているか確認します。

npx gulp -v

バージョンが表示されれば問題ありません。

次に下記のコマンドで、「themes」フォルダ内に「gulpfile.js」を生成します。

npx -p touch nodetouch gulpfile.js

次に生成した「gulpfile.js」をテキストエディタで開き、下記の内容をコピペして保存します。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");

const bs = require("browser-sync");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function browserSync(done) {
  bs({
    files:["./mytheme/**","./mytheme/*.css"],    // 指定した値が変更されるとブラウザをリロードする
    proxy : "サイト名.local", 
    port : 3000,    // browsersyncサーバが使うポート番号を変更できる
    notify: false,     // ブラウザ更新時に出てくる通知を非表示にする
    open: "external",    // ローカルIPアドレスでサーバを立ち上げる
  });

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.bs = series(browserSync);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

files:では、どこのフォルダの何というファイルをブラウザで読み込むか？というのを指定しています。

通常であればfiles:"./src/**"という記述だけで動くはずですが、私の場合は何故かCSSファイルの変更を読み込んでくれなかったので、"./mytheme/*.css"と追記しています。