PHP
JavaScript
gulp

gulpでphp環境 ~ gulp-connect-php ~

More than 1 year has passed since last update.

gulp環境で、PHPを使いたくて、browser-syncも使いたかった時に調べたメモ。

調べてた結果「gulp-connect-php」に行きついた。
他にもいろいろ方法はあるみたいだけど、「gulp-connect-php」はシンプルで良いと思われる。

node_modulesインストール
npm init
npm install --save-dev gulp
npm install --save-dev gulp-connect-php
npm install --save-dev browser-sync
gulpfile.jsサンプル(wwwディレクトリ内にPHPを設置)
var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({
    port:8001,
    base:'www'
  }, function (){
    browserSync({
      proxy: 'localhost:8001'
    });
  });
});

gulp.task('reload', function(){ 
  browserSync.reload();
});

gulp.task("default",['connect-sync'], function() {
  gulp.watch("./www/**/*.php",["reload"]);
});

と自分のmac環境だと動いたけど、windows環境だとうんともすんとも動かずで、
オプションにphpのexeとiniを指定出来るので、そっちを指定する方法で試したところ解決。
※このオプションのおかげでPHPのバージョン毎の環境が柔軟に作れて便利かも。

gulpfile.jsサンプル(bin指定Windowsバージョン)
var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({
    port:8001,
    base:'www',
    bin: 'C:/xamp/php/php.exe',
    ini: 'C:/xamp/php/php.ini'
  }, function (){
    browserSync({
      proxy: 'localhost:8001'
    });
  });
});

gulp.task('reload', function(){ 
  browserSync.reload();
});

gulp.task("default",['connect-sync'], function() {
  gulp.watch("./www/**/*.php",["reload"]);
});

gulpfile.jsサンプル(bin指定Macバージョン)
var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({
    port:8001,
    base:'www',
    bin: '/Applications/MAMP/bin/php/php5.6.2/bin/php',
    ini: '/Applications/MAMP/bin/php/php5.6.2/conf/php.ini'
  }, function (){
    browserSync({
      proxy: 'localhost:8001'
    });
  });
});

gulp.task('reload', function(){ 
  browserSync.reload();
});

gulp.task("default",['connect-sync'], function() {
  gulp.watch("./www/**/*.php",["reload"]);
});

勿論xamppのapacheは起動しなくても大丈夫。

他にもいろいろオプションがあるみたい。
詳しくは、「gulp-connect-phpのページ」をどうぞ。

※追記(6/17)
自分のWindows環境でデフォルト動かなかったのは、PHPにPATHが通ってなかったからでした。。
node_module内にPHPサーバーの機能が入っているのかと勘違いしました。

※追記(6/22)
Macのmamp内のPHPを指定するバージョンを追記しました。