gulpでphpをhtmlに変換する [gulp-php2html]


このプラグインを使います

gulp-php2html
https://www.npmjs.com/package/gulp-php2html

「拡張子が.phpから.htmlに変換される」ではないです。

イメージとしては
・phpをブラウザで表示し、
・それを名前をつけて保存する。
・index.phpならindex.htmlとして保存する
をまとめてやってくれます。

事前準備

  • ディレクトリ構成
/
├ html(php→html変換されたものがここに出力されます)
├ root(変換されるphp置き場)
  └ index.php
├ package.json
└ gulpfile.js
  • package.json
package.json
{
    "name": "dev",
    "version": "1.0.0",
    "author": "",
    "main": "gulpfile.js",
    "license": "ISC",
    "devDependencies": {
        "gulp": "*",
        "gulp-php2html": "*"
    }
}
  • gulpfile.js
gulpfile.js
// 環境変数
const setting = {
    html: {
        src: "./root/*.php",
        dest: "./html"
    }
};

const gulp = require("gulp");

// phpからhtmlに変換するプラグインの読み込み
const php2html = require("gulp-php2html");

// phpからhtmlに変換するタスクを作成
gulp.task("html", () => {
    return (
        gulp
            // 変換対象のファイル
            .src(setting.html.src)
            // php→html変換
            .pipe(php2html())
            // htmlを保存
            .pipe(gulp.dest(setting.html.dest))
    );
});

// ファイルの変更を監視してタスク実行
gulp.task("watch", () => {
    gulp.watch(setting.html.src, ["html"]);
});

// gulp起動時に実行するタスク
gulp.task("default", ["watch"]);

インストール

# package.jsonの内容をもとに、gulpとプラグインをインストール
$ npm install

gulpを実行(起動)します

$ gulp
[12:19:45] Using gulpfile (ディレクトリパス)/gulpfile.js
[12:19:45] Starting 'watch'...
[12:19:45] Finished 'watch' after 9.34 ms
[12:19:45] Starting 'default'...
[12:19:45] Finished 'default' after 69

これで /rootディレクトリ内のphpファイルを編集するたびに
php→htmlに変換されて
/htmlディレクトリにhtmlファイルが出力されます。

以上です。
ありがとうございました。