gulp-connect-phpを使ってgulpでPHPを動かす方法

gulp.jsのローカルサーバーで簡単にPHPを使えるようにする方法を紹介します。

gulpでローカルサーバーを作る際、「gulp-connect」というモジュールを使いますが、この「gulp-connect」ではPHPを使うことができません。

ヘッダーを読み込んで一元化したり、変数を使って条件分岐したり、Web開発では何かとPHPを使う機会が多いので困りますよね(^_^;)

ですが、「gulp-connect」の代わりにこのモジュールを使うことで解決できます！

gulp-connect-phpを使ってみる

「gulp-connect-php」というモジュールを使ってみましょう！

const gulpConnect = require( "gulp-connect-php" );

使い方は簡単で、この一行でモジュールを読み込みます。

※「gulp-connect-php」を使う時は、「gulp-connect」は必要ありません。

そして以下のように実行してあげればいいのですが、「出力先のフォルダパス」のキーに気をつけてください。
ここのキーが「base」になっていますが、「gulp-connect」では「root」だったはずです。
ここを直し忘れて「root」のままにしていると、gulpコマンドでエラーになってしまいます。

//gulpプラグイン読み込み
const gulp = require ( "gulp" );

//browserSync読み込み
const browserSync = require( "browser-sync" ).create();

//ローカルサーバー読み込み
const gulpConnect = require( "gulp-connect-php" );
//SSI（サーバサイドインクルード）読み込み
const connectSSI = require( "connect-ssi" );
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
   ローカルサーバー立ち上げ
   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
gulp.task( "connect-sync", function(){
	gulpConnect.server({
		base: "./dist/", //出力先のフォルダパス
		livereload: true,
		port: 3001
	}, function(){
		browserSync.init({
			proxy: "localhost:3001",
			middleware: [/*SSI有効*/
			connectSSI({
				baseDir: "./dist/",
				ext: ".html"
			})
			]
		});
	});
});

gulp.task("default", gulp.series(gulp.parallel("connect-sync")));

最後にこのコードを実行して表示されれば、成功です！

<?php echo "Hello world"; ?>