Pugの中でPHPを使えるようにする方法

更新 : 2022/12/30

カテゴリー : Pug, プログラミング・Web

by : It is R

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

今回は、npm-scriptsを使った場合と、gulpを使った場合の、PugでPHPを使う方法を紹介します。

※この記事は、2022/10/12に、新しい情報への書き直しと、npm-scriptsにも対応するための情報の追加をしています。

どのようにPugの中でPHPを使うのか
npm-scriptsでの、開発環境の作り方
gulpでの、開発環境の作り方
まとめ

どのようにPugの中でPHPを使うのか

まず、今回の環境を作り終えたとき、どのようにPugの中にPHPを書けるのかを見ていきましょう。
今回は、srcフォルダに、index.pugファイルを作成しました。

src/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に変換できる環境を、これから作っていきます。

npm-scriptsでの、開発環境の作り方

まずは、npm-scriptsを使う場合の、開発環境の作り方です。
（gulpを使っている場合は、ここは読み飛ばしてください）

npmの初期化とツールのインストール

以下のようにして「pug-cli」をインストールしておきましょう。

$ npm init -y
$ npm install pug-cli --save-dev

package.jsonにエイリアスの作成

さらに、package.jsonファイルのscriptsフィールドに、次のように追加します。

package.json

{
  "scripts": {
    "pug": "pug --obj pug-option.js --extension php --out dist src/index.pug"
  }
}

pugでは、--objオプションを使うことで、コンパイルするときのオプションを指定できます。
今回は、pug-option.jsファイルを指定しました。
また、--extensionにphpを指定することで、htmlではなくphpを書き出すことができます。
--outは書き出すフォルダを指定します。今回はdistフォルダに書き出されるようにしました。

そして、package.jsonと同じ階層に、pug-option.jsファイルを作ります。

pug-option.js

module.exports = {
    filters: {
        'php': text => {
            text = '<?php ' + text + ' ?>';
            return text;
        }
    }
}

Pugのコンパイル

あとは、さきほどのPugファイルをPHPにコンパイルしてみましょう。
次のコマンドを実行します。

$ npm run pug

すると、distフォルダの中に、index.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>

gulpでの、開発環境の作り方

つづいて、gulpを使った開発環境の作り方です。

npmの初期化とツールのインストール

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

gulp
gulp-pug
gulp-rename

以下のようにして、上記のツールをインストールしておきましょう。

npmの場合

$ npm init -y
$ npm install gulp gulp-pug gulp-rename --save-dev

gulpfile.jsの作成

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

gulpfile.js

const { src, dest } = 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 src( 'src/*.pug' )
        .pipe( pug( options ) )
        .pipe( rename( {
            extname: '.php'
        } ) )
        .pipe( dest( 'dist/php/' ) )
}

6〜14行目のoptionsというオブジェクトでは、filtersを使って、phpフィルターを使えるようにしています。

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

Pugのコンパイル

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

npmの場合

$ npx 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>