Gulpの環境でPHPを使う

Gulpとbrowser-syncを使ってHTMLのコーディングを行っている際に、一部PHPファイルを使いたいという状況があったので、その時に設定した方法をメモしておきます。

設定方法

browser-syncとgulp-connect-phpを使用するので、それぞれをインストールします。

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

gulpfile.jsに処理を記述します。

gulpfile.js

var gulp         = require('gulp'),
    browserSync  = require('browser-sync'),
    connect      = require('gulp-connect-php');

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

今回はdevディレクトリ内で開発を行っているのでbaseにdevを指定していますが、開発環境に応じて適宜変更してください。
確認用として、devディレクトリにindex.phpを配置します。

index.php

<?php
echo 'Hello world!!';

設定したタスクを実行します。

gulp server

ブラウザが立ち上がり、設定したindex.phpが表示されたらOKです。
　

タスクを実行するとエラーが表示される場合

今回タスクを実行してみたときに、以下のようなエラーが表示されました。

XXXXX\node_modules\gulp-connect-php\index.js:16
    [...arguments].forEach((x) => { this[x] = Symbol(x) });
     ^^^

SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (XXXXX\gulpfile.js:3:20)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

調べてみると、Node.jsのバージョンが5.0.0以上である必要があるようです。
Crash when running version 1.0.0 · Issue #42 · micahblu/gulp-connect-php
Node.jsのバージョンを5.0.0に変更すると、エラーが表示されなくなりました。
　

browser-syncを使わない場合

browser-syncを使わなくてよい場合、serverのタスクを以下のように変更すればOKです。

gulpfile.js

gulp.task('server', function() {
  connect.server({
    base: 'dev'
  });
});

【参考サイト】

• gulpでphp環境 ～ gulp-connect-php ～ – Qiita
• gulp-connect-php