Help us understand the problem. What is going on with this article?

CakePHP3 で LiveReload する (browser-sync使う

More than 3 years have 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から動かすのに若干の背徳感を感じる。

kei-nakoshi
働いています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした