gulp-devserver-php
v1.2.6
Published
This is a [gulp] plugin forked from [gulp-connect-php]. Why I developed newly for because that plugin was not maintained it for a long time, and is having serious security issues.
Maintainers
hadukineiReadme
gulp-devserver-php
|言語|Language| |---|---| | 日本語| English|
更新点: v1.2.6
- 依存パッケージの更新
- npmjs.com更新ワークフローへの対応
このパッケージはNode.js上でPHPを扱います。
gulpでの動作を想定しており、主にbrowser-syncと連動した開発用ライブサーバーとして機能させます。
またブラウザを起動せず、直接PHPの処理を実行させることも可能です。
このパッケージはgulp-connect-phpが長くアップデートされていないために作成したもので、コードの大部分に影響を受けていますが、セキュリティに問題のある依存パッケージは積極的に別のものへと置き換えています。
目次
特徴
元となった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メソッドを更新します。
"scripts": {
"clean": "gulp clean",
"build": "gulp",
"dev": "gulp dev"
}インストール
npmを使えるようにします。
npm init -yパッケージをインストールします。
npm i browser-sync fs-extra gulp gulp-if gulp-plumber gulp-pug gulp-rename gulp-devserver-phpgulpfile.mjsの作成例は、test/gulp/gulpfile.mjsを参照してください。
src/index.pugをdist/index.php（またはindex.html）へとトランスパイルしています。
読み込み方法の変更
gulp-connect-phpでは次のようにパッケージを読み込んでいました。
import browserSync from 'browser-sync'
import connectPHP from 'gulp-connect-php'gulp-devserver-phpでは読み込み方法が変わっています。
import browserSync from 'browser-sync'
import { server as phpServer } from 'gulp-devserver-php'関数そのものを呼び出すように変更していますが、パッケージ全体を読み込む場合は次のようにしてください。
import browserSync from 'browser-sync'
import * as devServerPHP from 'gulp-devserver-php'サーバーの起動方法
パッケージ全体を読み込んだ場合、従来通りの書き方になります。
devServerPHP.server(
{
base: 'dist',
},
() => {
browserSync.init({
proxy: 'localhost:8000',
})
}
)新たに導入した関数としての読み込みを行った場合、少しだけ簡略化できます。
phpServer(
{
base: 'dist',
},
() => {
browserSync.init({
proxy: 'localhost:8000',
})
}
)php.exeへのパスを環境変数に登録していない場合
WAMPやXAMPP、そしてMacで利用する場合の話。
php.exeとphp.iniへのパスが環境変数に登録されていないため、上記の例のままでは動作しません。
ApacheやPHPのインストールが完了している場合、この章での追加設定は必要ありません。
PHPの関連ファイルがすでにパソコン内に保存されている場合は、ファイルパスを第一引数に加えます。
パスが環境変数に登録している状態でも、別バージョンのPHPで動作させたい場合にも下記の例は有効です。
phpServer(
{
base: 'dist',
bin: "C:/php7.4.13/php.exe",
ini: "C:/php7.4.13/php.ini",
},
// 省略
)WAMP・XAMPPを用いる場合も同様ですが、ファイルの保存場所は（自分でインストールする場合に比べて）固定的であるため分かりやすいでしょう。
phpServer(
{
base: 'dist',
bin: 'C:/wamp64/bin/php/php8.3.14/php.exe',
ini: 'C:/wamp64/bin/php/php8.3.14/php.ini',
},
// 省略
)開発
ターミナルから実行可能なコマンドは以下の通りです。
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メソッドを更新します。
"scripts": {
"clean": "gulp clean",
"build": "gulp",
"dev": "gulp dev"
}インストール
npmを使えるようにします。
npm init -yパッケージをインストールします。
npm i browser-sync fs-extra gulp gulp-if gulp-plumber gulp-pug gulp-rename gulp-devserver-phpgulpfile.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 -dhttp://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メソッドを更新します。
"scripts": {
"serve": "gulp"
}インストール
npmを使えるようにします。
npm init -yパッケージをインストールします。
npm i gulp gulp-devserver-phpgulpfile.mjsの作成例は、test/singleton/gulpfile.mjsを参照してください。
index.phpの内容を実行しています。
読み込み方法の変更
gulpfile.mjs単体利用の読み込み方法の変更を参照してください。
import { server as phpServer, closeServer } from 'gulp-devserver-php'開いたPHPのプロセスを閉じる必要がありますので、そのための関数を追加で読み込んでいる点に注意してください。
サーバーの起動方法
phpServer({
//bin: 'C:/wamp64/bin/php/php8.3.14/php.exe',
//ini: 'C:/wamp64/bin/php/php8.3.14/php.ini',
}, () => {
closeServer()
})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のプロセスを閉じたり、完了メッセージを表示したりする時にご利用ください。