gulp-devserver-php

言語	Language
日本語	English

更新点: v1.2.4

• index.d.tsに型定義（export declare）を追加, 更新
• test/*のoption指定は、型定義を参照するように直接指定へと変更
• ライセンス表記を追加

---

このパッケージはNode.js上でPHPを扱います。

gulpでの動作を想定しており、主にbrowser-syncと連動した開発用ライブサーバーとして機能させます。

またブラウザを起動せず、直接PHPの処理を実行させることも可能です。

このパッケージはgulp-connect-phpが長くアップデートされていないために作成したもので、コードの大部分に影響を受けていますが、セキュリティに問題のある依存パッケージは積極的に別のものへと置き換えています。

目次

• gulp-devserver-php
  • 更新点: v1.2.4
  • 目次
  • 特徴
  • gulpfile.mjs単体での利用
    • 初期化
    • インストール
      • 読み込み方法の変更
      • サーバーの起動方法
      • php.exeへのパスを環境変数に登録していない場合
    • 開発
  • Dockerを用いたgulpfile.mjsでの利用
    • 初期化
    • インストール
      • 読み込み方法の変更
      • サーバーの起動方法
      • PHP.exeへのパスを環境変数に登録していない場合
    • Dockerコンテナの作成
    • 開発
  • ブラウザを使わずにPHPを直接利用する
    • 初期化
    • インストール
      • 読み込み方法の変更
      • サーバーの起動方法
    • 開発
  • 第一引数のオプション
    • port
    • hostname
    • base
    • bin
    • ini
    • debug
    • その他のオプション
  • 第二引数

特徴

元となったgulp-connect-phpはgulpを使ったPHPサイトの制作に欠かせないとても素晴らしいパッケージですが、長らくアップデートされておらず、npm iする度にnpm audit fixするよう警告されます。

そして実行しても警告文は解消されません！

そこでパッケージを更新しつつ、ESModule形式（import文）へ書き換えることにしたのがこのgulp-devserver-phpプラグインです。

gulpfile.mjs単体での利用

初期化

プロジェクトフォルダを作成し、次のフォルダを作成します。

mkdir dist
mkdir src

+- projectFolder/
  +- dist/
  +- src/

package.jsonのscriptsメソッドを更新します。

1"scripts": {
2  "clean": "gulp clean",
3  "build": "gulp",
4  "dev": "gulp dev"
5}

インストール

npmを使えるようにします。

npm init -y

パッケージをインストールします。

npm i browser-sync fs-extra gulp gulp-if gulp-plumber gulp-pug gulp-rename gulp-devserver-php

gulpfile.mjsの作成例は、test/gulp/gulpfile.mjsを参照してください。

src/index.pugをdist/index.php（またはindex.html）へとトランスパイルしています。

読み込み方法の変更

gulp-connect-phpでは次のようにパッケージを読み込んでいました。

1import browserSync from 'browser-sync'
2import connectPHP from 'gulp-connect-php'

gulp-devserver-phpでは読み込み方法が変わっています。

1import browserSync from 'browser-sync'
2import { server as phpServer } from 'gulp-devserver-php'

関数そのものを呼び出すように変更していますが、パッケージ全体を読み込む場合は次のようにしてください。

1import browserSync from 'browser-sync'
2import * as devServerPHP from 'gulp-devserver-php'

サーバーの起動方法

パッケージ全体を読み込んだ場合、従来通りの書き方になります。

1devServerPHP.server(
2  {
3    base: 'dist',
4  },
5  () => {
6    browserSync.init({
7      proxy: 'localhost:8000',
8    })
9  }
10)

新たに導入した関数としての読み込みを行った場合、少しだけ簡略化できます。

1phpServer(
2  {
3    base: 'dist',
4  },
5  () => {
6    browserSync.init({
7      proxy: 'localhost:8000',
8    })
9  }
10)

php.exeへのパスを環境変数に登録していない場合

WAMPやXAMPP、そしてMacで利用する場合の話。

php.exeとphp.iniへのパスが環境変数に登録されていないため、上記の例のままでは動作しません。

ApacheやPHPのインストールが完了している場合、この章での追加設定は必要ありません。

PHPの関連ファイルがすでにパソコン内に保存されている場合は、ファイルパスを第一引数に加えます。

パスが環境変数に登録している状態でも、別バージョンのPHPで動作させたい場合にも下記の例は有効です。

1phpServer(
2  {
3    base: 'dist',
4    bin: "C:/php7.4.13/php.exe",
5    ini: "C:/php7.4.13/php.ini",
6  },
7  // 省略
8)

WAMP・XAMPPを用いる場合も同様ですが、ファイルの保存場所は（自分でインストールする場合に比べて）固定的であるため分かりやすいでしょう。

1phpServer(
2  {
3    base: 'dist',
4    bin: 'C:/wamp64/bin/php/php8.3.14/php.exe',
5    ini: 'C:/wamp64/bin/php/php8.3.14/php.ini',
6  },
7  // 省略
8)

開発

ターミナルから実行可能なコマンドは以下の通りです。

• npm run clean: 出力したファイルを削除する
• npm run build: 静的なファイルを出力する
• npm run dev: 開発モードを起動する （今回の主眼）

開発モードを起動すると、ブラウザの新しいタブでPHPが動作するはずです。

gulpfile.mjsの26行目にある変数を切り替えれば、出力されるファイルの拡張子は.phpと.htmlとで変わります。

Dockerを用いたgulpfile.mjsでの利用

gulpfile.mjs単体での利用を応用して、Dockerでも動作させることが可能です。

初期化

プロジェクトフォルダを作成し、次のフォルダを作成します。

mkdir config
cd config
mkdir web
cd ../
mkdir html
cd html
mkdir app
mkdir src
cd ../

+- projectFolder/
  +- config/
  | +- web/
  +- html/
    +- app/
    +- src/

package.jsonのscriptsメソッドを更新します。

1"scripts": {
2  "clean": "gulp clean",
3  "build": "gulp",
4  "dev": "gulp dev"
5}

インストール

npmを使えるようにします。

npm init -y

パッケージをインストールします。

npm i browser-sync fs-extra gulp gulp-if gulp-plumber gulp-pug gulp-rename gulp-devserver-php

gulpfile.mjsの作成例は、test/docker/gulpfile.mjsを参照してください。

html/src/index.pugをhtml/app/index.php（またはindex.html）へとトランスパイルしています。

読み込み方法の変更

gulpfile.mjs単体利用の読み込み方法の変更を参照してください。

サーバーの起動方法

gulpfile.mjs単体利用のサーバーの起動方法を参照してください。

フォルダパスが変わっていますので、その点だけご注意ください。

• srcフォルダ: html/srcフォルダへ変更
• distフォルダ: html/appフォルダへ変更

PHP.exeへのパスを環境変数に登録していない場合

gulpfile.mjs単体利用のPHP.exeへのパスを環境変数に登録していない場合を参照してください。

Dockerコンテナの作成

docker-compose.ymlと、config/web/Dockerfileを作成します。

作成例はtest/docker/フォルダを参照してください。

Docker Desktopを起動した状態で、ターミナルから次のコマンドを実行します。

docker compose up -d

http://localhost:8880をブラウザで開けば、Dockerコンテナの管理下にある開発サーバを確認できるでしょう。

Dockerコンテナの利用を終了したい場合はdocker compose down -vコマンドから実行可能です。

開発

ターミナルから実行可能なコマンドは以下の通りです。

• npm run clean: 出力したファイルを削除する
• npm run build: 静的なファイルを出力する
• npm run dev: 開発モードでコーディングする （今回の主眼）

gulpfile.mjsの26行目にある変数を切り替えれば、出力されるファイルの拡張子は.phpと.htmlとで変わります。

開発モードを実行しても、ブラウザの新しいタブで自動的に開かれることはありません。

代わりにhttp://localhost:8880をブラウザで開くと、Dockerを利用した出力結果が表示されます。

開発モードを起動したままhtml/src/フォルダの中身を更新・保存するとgulpのwatchタスクが自動的にトランスパイル処理を実行してくれますが、ブラウザのオートリロードは働いていないので手動リロードが必要になります。

ブラウザを使わずにPHPを直接利用する

直接PHPを実行することも可能です。

初期化

プロジェクトフォルダを作成します。

package.jsonのscriptsメソッドを更新します。

1"scripts": {
2  "serve": "gulp"
3}

インストール

npmを使えるようにします。

npm init -y

パッケージをインストールします。

npm i gulp gulp-devserver-php

gulpfile.mjsの作成例は、test/singleton/gulpfile.mjsを参照してください。

index.phpの内容を実行しています。

読み込み方法の変更

gulpfile.mjs単体利用の読み込み方法の変更を参照してください。

1import { server as phpServer, closeServer } from 'gulp-devserver-php'

開いたPHPのプロセスを閉じる必要がありますので、そのための関数を追加で読み込んでいる点に注意してください。

サーバーの起動方法

1phpServer({
2  //bin: 'C:/wamp64/bin/php/php8.3.14/php.exe',
3  //ini: 'C:/wamp64/bin/php/php8.3.14/php.ini',
4}, () => {
5  closeServer()
6})

browser-syncパッケージと連動する必要がなくなったため、シンプルになりました。

server関数 (phpServer関数)へphp.exe・php.iniのパスに関する設定を第一引数に追加する場合、PHP.exeへのパスを環境変数に登録していない場合を参照してください。

第二引数では、PHPプロセスを閉じる処理を行っています。

開発

ターミナルから実行可能なコマンドは以下の通りです。

• npm run serve: index.phpを実行する

変数の内容を確認したい場合はvar_dump()関数などで標準出力へ持って行くのでなく、error_log($data, 4)を用いてください。

第二引数の4は、ログ出力用のハンドラへ渡すための指定です

ここではエラーログを使って、ターミナルに出力させています

第一引数のオプション

概ねgulp-connect-phpに準拠しており、bin・iniを除けば特に指定をしなくても動作してくれると思います。

port

アクセスする時のポート番号を指定します。

初期値: 8000 (number)

hostname

アクセスする時のホスト名を指定します。

初期値: 127.0.0.1 (string)

内部的にはlocalhostと同じです。

base

どのフォルダをサーバとしての基本ディレクトリとするかを指定します。

初期値: . (string)

ここではgulpfile.mjsが存在しているフォルダが対象となります。

bin

php.exeへのファイルパスを指定します。

初期値: php (string)

環境変数に登録している場合、初期値のphpがファイルパスの代わりになります。

WAMP・XAMPPを利用した環境や、MacなどPHPがインストールされているけれども利用できない状態にされている環境、あるいはインストール済みのPHPではない別バージョンのPHPを利用する場合にphp.exeへのファイルパスを指定します。

ini

php.iniへのファイルパスを指定します。

初期値: なし

指定しない場合、環境変数からphp.iniへのファイルパスを取得します。

binを指定した場合、同時にiniも指定する必要があります。

また独自のphp.iniへと切り替える場合にも指定することが可能です。

debug

php.exeへ渡される引数を確認するかどうかを指定します。

初期値: false (boolean)

trueへ変更すると、php.exeの引数とログ（エラーログやアクセスログなど）がターミナルに出力されるようになります。

その他のオプション

gulp-connect-phpのオプションを参照してください。

第二引数

PHPの処理が完了した後に実行されるコールバック関数となっています。

PHPのプロセスを閉じたり、完了メッセージを表示したりする時にご利用ください。