pugファイルにphpを書く

phpのメールフォームを実装するときに
どうしてもpug環境を手放したくなかったので、なんとかしました

前提条件

• gulp
• pug

ディレクトリ構成

基本は拡張子.htmlを使用し、
お問い合わせページだけ.phpにします

index.html
　└─ contact/
　　　└─ index.php

gulp タスク

gulp-renameパッケージを入れておいてください

$ npm install gulp-rename --save-dev

gulpfileでの設定は以下

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');

/* ─────────────────────────────
/contact/ディレクトリのみ、
.pugを.phpへコンパイル
───────────────────────────── */
gulp.task('pug:toPhp', function () {
	return gulp.src('src/contact/**/*.pug')
		.pipe(pug({
			basedir: 'src',
			pretty: true
		}))
		.pipe(rename({
			extname: '.php' //phpファイルとして書き出し
		}))
		.pipe(gulp.dest('dist/contact/'))
});

/* ─────────────────────────────
.phpで作成したファイルは
そのまま.phpとしてコンパイル（コピー）
───────────────────────────── */
gulp.task('php', function() {
	return gulp.src('src/**/*.php')
		.pipe(gulp.dest('dist/'))
});

pugにphpを書く

基本的に文字を改行したいときと感覚は変わりません

文頭に|でコンパイルしてくれます

| <?php print('Hello World!!!!!'); ?>

または、
文末に.を打ったあとに、インデント一つ落とします

p.
	<?php print('Hello World!!!!!'); ?>

タグの属性値として書く時

!=を使用する
（クオテーション気をつけて！）

input(type='text' name='' value!='<?php echo "ここにvalue値を入れる"; ?>')

または、
!=とインデントの合わせ技で視認性UP！

input(
	type='text'
	name=''
	value!='<?php echo "ここにvalue値を入れる"; ?>')

長文のときは

長文のphpは外部ファイル化してインクルードすると楽でした

| <?php include('XXX.php'); ?>

まとめ

無理矢理感が否めない。
ハッピーpugライフを！