GulpでPHP環境を使用する為に、
「gulp-connect-php」を使用して
xamppのphp.iniとphp.exeを流用する方法があるが、
私の環境では上手くいかなかった。

そもそも上記方法を用いてPHP環境だけ動いても
Wordpress案件においてDBを使用するので困ってしまう。

よってXamppと連携させる方法を見出したので記そうと思う。

導入方法

①Xamppにgulpフォルダを作成する

Xamppのディレクトリについては任意で構わないが、
私は以下のディレクトリに配置した。

C:\xampp\htdocs\test\gulp

なお、Gulp環境の作成、使用方法については以下の記事にまとめているので、
Gulp環境を構築しておく。

Windows8（x64）でgulpを初期設定する
 Windows8（x64）のgulpでうまくいかなかったプラグインの対処法
 Windows8（x64）で構築したgulpの使い方

②プラグインのインストール

上記プラグインをインストールする。

npm install --save-dev gulp-connect-php

しかし、私の環境の場合、これではうまくいかなかったので、

npm install gulp-connect-php@0.0.5

これを打ち込んだらうまくいった。

③gulpfile.jsの設定

以下の記述を追加する。

gulpfile.js

var connect = require('gulp-connect-php');
var home_src = 'develop/';// index.htmlがある場所

gulp.task('connect', function() {
   connect.server({
     hostname: 'localhost',
     base: home_src
   }, function (){
    browserSync({
      notify: false,
      proxy: 'http://localhost/test/gulp/develop'//データが入っているXamppのURL
    });
  });
});

仕組みとしては、proxyにXamppのURLを入れることにより、
gulpのリロードを行った際、proxyのURLをリロードさせるようにする。
なお、gulp watchを使用したいので、以下の記述も追加した。

gulpfile.js

var sass_src = 'develop/resource/sass/';// Sassの場所
var home_src = 'develop/';// index.htmlがある場所

gulp.task("watch",['connect'], function() {
    gulp.watch(sass_src + "**/*.scss",["sass"]);
    gulp.watch(home_src + "**/*.html", ['bs-reload']);
    gulp.watch(home_src + "**/*.css", ['bs-reload']);
    gulp.watch(home_src + "**/*.php", ['bs-reload']);
});

その他リロードさせたいファイルや設定などあれば、追記していく。

④Xamppを起動し、コマンドを打つ

XamppのApacheとMySQLを起動し、以下のコマンドを打つ。

gulp watch

これであとは

C:\xampp\htdocs\test\gulp

内にある該当ファイルを編集するとライブリロードとコンパイルを実現しつつ
XamppのURLをリロードすることが出来る。

以上で、設定は完了だ。

Wordpressの場合

C:\xampp\htdocs\test\gulp\develop\wordpress

このようにディレクトリを作成し、構築していくと
テキストエディタベースでテーマの改造をする際は便利だと思う。
※管理画面からプラグインなどを触るときはgulp watchを切っておく。

Windows8（x64）でGulpとXamppを連携させる