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

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

# 目的

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

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

[PHPの公式ページ](https://www.php.net/downloads)からインストーラをダウンロード。
今回は一番上の最新バージョンをインストールするので、最新バージョンの「Windows downloads」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310435/c8f67cc9-31cd-00d3-cd7a-a6dd43e54857.png)

 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ファイルをダウンロード。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310435/46742586-b08c-35d1-5361-67dd9ae95c87.png)

ダウンロードしたZIPファイルを任意のディレクトリに展開するだけでインストールは完了。
今回はCドライブ直下「php」というフォルダを用意し、その中に配置した。「c:\PHP\」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310435/3e4099e9-ac67-514c-c991-284cfba1d61a.png)

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

# Gulp設定

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

下記コマンドを実行してインストールする。
```
npm install -D gulp-connect-php
```

そして色々試した結果、まずはVSCで編集中のPHPファイルをブラウザで表示できるところまでを下記のコードで動作が確認できた。
```javascript: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` と連携できるようにした。

```javascript: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下記のようになった。
```javascript: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インストールと初期設定](https://www.javadrive.jp/php/install/)
[PHPのダウンロードとインストール - Windows10](https://webkaru.net/php/windows-php-instal/)
[gulp-connect-phpをwindowsで使う](https://half-half.info/?p=707)
[フロントエンドの人でも楽して、PHPが使える環境をサクッと用意したいのだ！](https://bashalog.c-brains.jp/16/10/12-191300.php)