3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-11

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

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ファイルが出力されます。

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?