目的

node の browser-sync が便利だったので CakePHPアプリケーションでも
nodeを利用してLiveReload実現する、PHPむけなので、なるべくJSを触らずにすむように実施。
最終的に src以下とwebroot以下のファイル変更時にブラウザの自動リロードを実現する。

前提

• phpのインストール及び phpにPathを通しておく
• composer 導入
• nodejs/npm 導入

手順

1. composer で cakephp の本体を取得
2. composer で依存関係をインストール
3. ビルトインサーバの起動用に ./bin/cake に実行権限をつける
4. npm の準備(package.json を生成する)
5. browser-sync のインストール
6. package.json の編集
7. npm から Cakeサーバとbrowser-syncサーバを起動する

1. composer で cakephp の本体を取得

composer で cakephp を example ディレクトリにインストールし、
作成されたディレクトリに移動する。

$ composer create-project --prefer-dist cakephp/app example
$ cd example

2. composer で依存関係をインストール

composerで依存関係をインストールする

$ composer install 

3. ビルトインサーバの起動用に ./bin/cake に実行権限をつける

windows の場合はこの工程は必要無いので、起動確認だけ行う

$ chmod +x ./bin/cake 

起動確認

$ ./bin/cake server 

port 8765 でcakephp が起動すればOK、起動が確認できたらctr + c で
停止しておく。

4. npm の準備(package.json を生成する)

$ npm init -y

5. browser-sync のインストール

--save-dev は npm の依存関係をpackage.json に保存するためのオプション

$ npm install browser-sync --save-dev

6. package.json の編集

scriptsへコマンドを追加する。追記したscript は npm run [key] で実行できる、また
scriptsで定義したコマンドは別のscriptsからも実行できる。

追加するコマンドは3つ

6-1. CakePHPの開発サーバを実行する cake コマンド

"cake": "./bin/cake server"

6-2. 1.で起動された、CakePHP を browsersync を通して port 8766 へ プロキシする browsersync コマンド

"browsersync": "node ./node_modules/.bin/browser-sync start --proxy localhost:8765 --port 8766 --files=\"src/**/*.*\" --files=\"webroot/**/*.*\"",

--files は変更検知するディレクトリを指定する、{src,webroot}/**/. のような指定はディレクトリに関してはできないようだ、
pulugin ディレクトリ等も対象にしたい場合は、引数を追加してくのが無難？

6-3. 1. 2. のコマンドを まとめて並列実行する start コマンド

"start": "npm run cake && npm run browsersync" 

すでに生成されている package.json を開く。(テキスト編集できるソフトならなんでも良い

vi ./package.json

{
  "name": "example",
  "version": "1.0.0",
  "description": ""
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    /* 以下３行が追記  */
    "cake": "./bin/cake server",　/* 1 */.
    "browsersync": "node ./node_modules/.bin/browser-sync start --proxy localhost:8765 --port 8766 --files=\"src/**/*.*\" --files=\"webroot/**/*.*\"", /* 2 */
    "start": "npm run cake && npm run browsersync" /* 3 */
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13"
  },
  "dependencies": {
    "browser-sync": "^2.18.13"
  },
  "keywords": []
}

7. npm から Cakeサーバとbrowser-syncサーバを起動する

$ npm start

問題がなければ、コマンドを実行時に規定のブラウザでcakeアプリが起動する、
その後はsrcとwebroot以下のファイル編集を行う度にブラウザリロードが実行される。

まとめ

構成は [cakeアプリ:8765] > [nodeのプロキシサーバ:8766] のような感じ。

動作としてはプロキシサーバが元ページを読み込む再に body に　スクリプトを仕込んで
変更を検知をブラウザ側に伝えているようだ、browser-syncのGUIもついており、回線速度の
エミュレートなんかもできそう。サンプルはCakeだけど、他のPHPフレームワークでもほぼ同じ方法を使えそう。ビルトインサーバじゃなくNginxとかで動かしている場合でも、browsersync のポートを合わせてあげれば動くはず。
PHPをnpm scriptsから動かすのに若干の背徳感を感じる。