Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@kei-nakoshi

CakePHP3 で LiveReload する (browser-sync使う

目的

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

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
0
Help us understand the problem. What are the problem?