Edited at

CakePHP3 で LiveReload する (browser-sync使う

More than 1 year has passed since last update.


目的

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",
/* 以下3行が追記 */
"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から動かすのに若干の背徳感を感じる。