【初心者】GulpでPHP導入メモ【備忘録】

はじめに

投稿時点で、筆者は知識ゼロの状態から勉強を初めて2ヶ月程度の実力です。
そのため、理解不足や説明不足、誤った内容や呼び方をしている可能性があります。
万が一参考にする場合は上記の点を考慮した上でご一読ください。
説明文の内容はChatGPT先生からの引用も多いです。

目的

PHPファイルをGulpのBrowserSyncでブラウザ表示させたい

導入

PHPインストール

Windowsを使用する場合、PHPのインストールが必要。
Macの場合は最初から入っているらしい。

PHPの公式ページからインストーラをダウンロード。
今回は一番上の最新バージョンをインストールするので、最新バージョンの「Windows downloads」をクリック

64bit用…
「VS16 x64 Non Thread Safe」
「VS16 x64 Thread Safe」
32bit用…
「VS16 x86 Non Thread Safe」
「VS16 x86 Thread Safe」

この中のどちらかをダウンロード。
以下ChatGPT引用

VS16 x64 Non Thread SafeとVS16 x64 Thread Safeは、PHPのWindows用バイナリのビルドタイプの違いです。選択するべきビルドタイプは、使用するウェブサーバーや他のPHP拡張機能との互換性に依存します。
Non Thread Safe (NTS): このバイナリは、マルチスレッドのウェブサーバー (Apache等) と一緒に使用する場合に適しています。NTSバイナリは、スレッドセーフ性の制御を行わず、スレッドセーフなライブラリを使用しません。
Thread Safe (TS): このバイナリは、スレッドセーフなウェブサーバー (IIS等) や一部の拡張機能と一緒に使用する場合に適しています。TSバイナリは、スレッドセーフ性の制御を行い、スレッドセーフなライブラリを使用します。
一般的に、Apacheを使用する場合はNTSバイナリを、IISを使用する場合はTSバイナリを選択します。ただし、具体的なウェブサーバーや他のPHP拡張機能との互換性を確認するために、公式のドキュメントやコミュニティのサポートを参照することをおすすめします。
また、開発環境やプロジェクトの要件に応じて、どちらのバイナリを使用するかを決定することもできます。開発環境やプロジェクトの要件に特定の指定がない場合は、一般的にはNTSバイナリが選択されることが多いです。
最終的な選択は、プロジェクトの要件と他の要素に基づいて行う必要があります。

今回は「VS16 x64 Thread Safe」のZIPファイルをダウンロード。

ダウンロードしたZIPファイルを任意のディレクトリに展開するだけでインストールは完了。
今回はCドライブ直下「php」というフォルダを用意し、その中に配置した。「c:\PHP\」

インストールは完了したが、このままでは使えないのでPATHを設定する必要がある。
こちらを参考に設定した、とても簡単。
設定後はPHPバージョン確認で動作チェックするところまでやること。

Gulp設定

PHPサーバーをGulpで扱うために gulp-connect-php プラグインを使用する
以下ChatGPTからの引用

gulp-connect-phpは、PHPサーバーをGulpタスクと統合するためのGulpプラグインです。このプラグインを使用すると、Gulpタスク内でPHPサーバーを起動し、ファイルの変更を監視して自動的にリロードすることができます。

下記コマンドを実行してインストールする。

npm install -D gulp-connect-php

そして色々試した結果、まずはVSCで編集中のPHPファイルをブラウザで表示できるところまでを下記のコードで動作が確認できた。

gulpfile.js

const gulp = require('gulp');
const connectPhp = require('gulp-connect-php');

// タスク: PHPサーバーを起動する
gulp.task('server', function(done) {
  connectPhp.server({
    base: './src',
    port: 8000,
    keepalive: true
  });
  done();
});

// タスク: ファイルの変更を監視する
gulp.task('watchFiles', function() {
  gulp.watch('./src/index.php').on('change', function() {
    gulp.src('./src/index.php')
      .pipe(connectPhp.reload());
  });
});

// デフォルトタスク
gulp.task('default', gulp.series('server', 'watchFiles'));

この状態でターミナルに gulp コマンドを実行し、ブラウザのURLに http://localhost:8000/index.php を入力。
自分はこれでPHPファイルをブラウザで確認することができた。

次は browserSync と連携できるようにした。

gulpfile.js

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const connectPhp = require("gulp-connect-php");
 
// タスクの設定
gulp.task("server", function () {
  connectPhp.server({
    base: "./src/index.php", // PHPファイルのディレクトリパス
    port: 8000, // 使用するポート番号
  }, function (){
    browserSync.init({
      proxy: "127.0.0.1:8000", // プロキシ先のアドレスとポート番号
    });
  });

  // srcフォルダ以下のファイルを監視
  gulp.watch("./src/**/*.php", function () {
    browserSync.reload(); // ファイルに変更があれば同期しているブラウザをリロード
  });
});

これで gulp sever コマンドをターミナルで実行すると、自動的にブラウザが開く・ファイル更新で自動リロードが実現できた。

最後にこれらを自身の環境に合わせて色々修正し、最終的に普段使用しているサーバー関係のgulpfile下記のようになった。

server.mjs

import { dir } from "../config.mjs"; // ファイルパス格納
import connectPhp from 'gulp-connect-php'; // gulp-connect-phpのプラグインの読み込み
import browserSync from 'browser-sync'; // browser-syncのプラグインの読み込み

// PHPサーバー起動
const server = (done) => {
  connectPhp.server({ // PHPサーバー起動
    base: dir.src.root, //ルートディレクトリ指定
    port: 8000 // PHPサーバーのポート番号を指定
  }, function (){
    browserSync.init({ // browserSync.init() メソッドを呼び出し、ブラウザ同期機能が有効になる
      proxy: "127.0.0.1:8000", // プロキシ先のアドレスとポート番号、127.0.0.1 は自分自身を指すIPアドレス、したがって、127.0.0.1 はローカルホストを表し、自分自身へのアクセスを指定するために使用される特殊なIPアドレスです。
      notify: false // 通知機能を無効化するオプション
    });
  });
  done();
}

// リロード実行
const reload = (done) => {
  browserSync.reload();
  done();
};

export { server, reload };

参考サイト

PHPインストールと初期設定
PHPのダウンロードとインストール - Windows10
gulp-connect-phpをwindowsで使う
フロントエンドの人でも楽して、PHPが使える環境をサクッと用意したいのだ！