1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Pug
  6. »
  7. PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。

PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増えるほど管理が大変になるので、あまり使いたくないです。
ドットや縦棒を使う方法もありますが、ここではその方法は使いません。

なんと、gulpfile.jsをちょっと工夫するだけで、PugのなかでもPHPをスマートに使うことができます。

そこで今回は、プラグインに頼らずPugでPHPを使う方法を紹介します。

目次
  1. 使用するツールについて
  2. フォルダ構成
  3. Pugの中にPHPを書くための、gulpfile.jsの作成
  4. Pugの中にPHPを書く方法
  5. PugをPHPに変換する
  6. まとめ

使用するツールについて

プラグインに頼らないとはいっても、一つ一つ自分で作っていては、本当にやりたいことができなくなってしまうので、多少は使います。

使用するツールは以下の3つです。

  • gulp
  • gulp-pug
  • gulp-rename

npmなどで、適当なフォルダにインストールしてください。
今回はsampleというフォルダにインストールしました。

npmの場合

$ npm init -y
$ npm i gulp gulp-pug gulp-rename -D

yarnの場合

$ yarn init -y
$ yarn add gulp gulp-pug gulp-rename -D

フォルダ構成

主なフォルダ構成は次のようになっています。

sample
    ┣ assets/pug/index.pug
    ┣ gulpfile.js
    ┣ node_modules/
    ┗ package.json

assetsフォルダや、gulpfile.jsなどは、これから作成していきます。

Pugの中にPHPを書くための、gulpfile.jsの作成

つづいて、gulpfile.jsを作成します。

gulpfile.js

const gulp   = require("gulp");
const pug    = require("gulp-pug");
const rename = require('gulp-rename');
 
exports.pug = () => {
	const options = {
		filters: {
			'php': text => {
				text = '<?php ' + text + ' ?>';
				return text;
			}
		}
	};
	return gulp.src( 'assets/pug/*.pug' )
	.pipe( pug( options ) )
	.pipe( rename( {
		extname: '.php'
	} ) )
	.pipe( gulp.dest( 'dist/php/' ) );
}

ここで注目して欲しいのが、6〜13行目のoptionsというオブジェクトです。
filtersを使って、PHPフィルターを使えるようにしています。

さらに、16〜18行目で、拡張子の変換をしています。
これでPugの中にPHPを書くことができるようになります。

Pugの中にPHPを書く方法

では、どうやってPugにPHPを書けばいいのでしょうか。
assets/pug/に、index.pugというファイルを作成し、実際にPHPを書いてみましょう。

assets/pug/index.pug

doctype
html
    head
        title PugでPHPを使う方法
    body
        //-PHPが一行のとき
        :php $animal = "ねこ"

        //-PHPを文の途中で使いたいとき
        p わたしは<?php echo $animal; ?>になりたい。

        //-属性として使いたいとき
        input( type="text" name="name" value!="<?php echo $animal; ?>" )

        //-何行ものPHPを使いたいとき
        :php
            $a = "私は";
            $b = "猫に";
            $c = "なりたい";
            echo $a.$b.$c;

このように、PHPを書きたいところでは:phpを使います。
文の途中や属性としてPHPを使いたい場合は通常通りに<?php ?>を使います。

また13行目のように属性として使う時は、コンパイル時に括弧が変換されてしまいますので、=の前に!をつけます。

PugをPHPに変換する

では、さきほどのソースをPHPに変換してみます。
変換には以下のコマンドを入力します。

npmの場合

$ npx gulp pug

yarnの場合

$ yarn gulp pug

これでさきほどのPugファイルがPHPに変換されます。

<!DOCTYPE html><html><head><title>PugでPHPを使う方法</title></head><body><?php $animal = "ねこ" ?><p>わたしは<?php echo $animal; ?>になりたい。</p><input type="text" name="name" value="<?php echo $animal; ?>"><?php $a = "私は";
$b = "猫に";
$c = "なりたい";
echo $a.$b.$c; ?></body></html>

まとめ

Pugの中でPHPを使うには、ほんの少しgulpfile.jsに工夫が必要になります。

今回はフィルターを使うことによって、PugでPHPを使ってみました。
とても便利なので、ぜひ一度お試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、第8弾です。 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、4回目の今

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です