grunt-phpでPHPのLivereloadをする方法

grunt-phpとgrunt-contrib-watchをインストール

※grunt-phpを使う場合はgrunt-contrib-connectは必要ない

npm install -D grunt-php@0.2.0 grunt-contrib-watch

ブラウザ拡張をインストール

(cromeの場合）
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

Gruntfile.jsの設定

Gruntfile.js

'use strict';

module.exports = function (grunt) {

    grunt.initConfig({

        // Built-in PHP-Server
        php: {
            server: {
                options: {
                    //keepalive: true,
                    hostname: 'localhost',
                    port: 5000,
                    base: 'app',
                    open: true
                }
            }
        },

        watch: {
            livereload: {
                options: {
                    livereload: true
                },
                files: [
                    'app/*.php'
                ]
            }
        },

    });

    grunt.registerTask('server', [
        'php:server',
        'watch'
    ]);
};

ポイント

v0.2.0以前を使う

最新版であるv0.3.2ではサーバがすぐに終了してしまい上手くいきませんでした。
と思いきやたまーにできたりと不安定。。
なぜか10ページくらい同時にopenすることも。
なおyeomanのgenerator-phpではv0.1.1が使用されています。

keepaliveは付けちゃだめ

keepaliveを付けるとPHPサーバの起動でタスクの実行が止まってしまうので以後のwatchが実行されません。

ブラウザのLivereloadボタンを手動でオンにする

サーバが起動してページが開いた初期状態では、Livereloadボタンの真ん中がxのままになっていることがあるので、手動でオンにします。

ビルトインサーバじゃなくてMAMPとか使いたい

grunt-phpを外してwatchだけにすれば、Livereloadサーバが起動している状態になるので、
MAMPで起動したページを開いてLivereloadボタンをオンにすれば、好きなページをLivereloadできます。

参考リンク