Edited at

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を指定するバージョンを追記しました。