HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。
PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増えるほど管理が大変になるので、あまり使いたくないです。
ドットや縦棒を使う方法もありますが、ここではその方法は使いません。
なんと、gulpfile.jsをちょっと工夫するだけで、PugのなかでもPHPをスマートに使うことができます。
そこで今回は、プラグインに頼らずPugでPHPを使う方法を紹介します。
使用するツールについて
プラグインに頼らないとはいっても、一つ一つ自分で作っていては、本当にやりたいことができなくなってしまうので、多少は使います。
使用するツールは以下の３つです。
- 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を使ってみました。
とても便利なので、ぜひ一度お試しください。
