ワイヤード・パンチ

preprosによるpug(jade)の変換先を、tplに変更する方法。

コーディングのうえでは楽になるsassやcoffeescriptやpugなどですが、そのままではブラウザで読み込めません。

でも、proprosを使って、保存するたびに自動的に元の形式に変換されるようにすれば、作業が圧倒的に楽になります。

それを踏まえて、htmlが入り混じったphpを書くうえで便利になるsmarty用のtplを、pugで書くことができたらさらに便利だと思ったのですが、pugの変換先をhtml以外に変えられるのでしょうか。

広告

pugを使ったsmartyの一例。

そもそもsmartyを使ったらどれだけphpがすっきりするか。

まずは、もともとのphpから。

なお、下記のコードは現在仕事の上で作成中の、とあるwordpressサイトから一部を抜粋して、ちょっと書き換えたものです。

<header id="toppage_header">
	<p class="logo"></p>
	<p class="description"></p>
	<p class="tel_number"><a href="tel:123456">123456</a></p>
</header>

関数や変数の値を出力するために、?phpやechoやセミコロンをいちいちつけると、どうもごちゃごちゃして見えますし、打つのも面倒です。

でもこれをsmartyに置き換えると、こんな感じ。

<header id="toppage_header">
	<p class="logo">{bloginfo("name")}</p>
	<p class="description">{bloginfo("description")}</p>
	<p class="tel_number"><a href="tel:123456">123456</a></p>
</header>

波括弧で囲うだけになるので、スッキリして見えます。

ただ、それでも無駄が多いです。htmlという言語の書き方が、無駄のかたまりです。

いちいち閉じタグを書かないといけないのが、めんどくさくてたまりません。

よってこれを、pugを使った書き方に置き換えます

header#toppage_header
	p.logo {bloginfo("name")}
	p.description {bloginfo("description")}
	p.tel_number
		a(href="tel:123456") 123456

閉じタグを付ける必要はなくなり、classやIDはcss同様にピリオドとシャープで書けるようになりました。

smartyによりちょっとはすっきりしたコードが、さらにすっきりするのです。

pugをtplで置き換えられるようにする。

smartyは通常のphpと違って、tplという拡張子が使われます。

でも、preprosでpugを変換するとhtmlになってしまうので、これをどうにかしてtplに変えないといけません。

今回はtop.pugから、top.tplに変換を行います。

よってpreprosを開いて、pugファイルのOUTPUT PATHに直接「top.tpl」と入れてみたのですが、「top.tpl.html」に勝手に置き換わってしまいます

それならば、どうすれば良いのか。

prepros上で、プロジェクト内のファイルの設定を何かしら変更すると、ディレクトリに「prepros-6.config」というファイルが出来上がっています。

それが、preprosのプロジェクトの設定ファイルとなります。画面上で設定したことが、そのファイルとなって記録されているというわけです。

そのconfigファイルをテキストエディタで開き、「top.tpl.html」と書かれている箇所を探します。

今回の場合は、下記の一行が見つかりました。

"configJson": "{\"forceCompile\":false,\"customOutput\":\"templates/top.tpl.html\",\"autoCompile\":true,\"compiler-pug\":{\"enabled\":true,\"pretty\":true}}"

その一行から、「top.tpl.html」と書かれている部分を「top.tpl」に書き換えて、上書き保存しましょう。

"configJson": "{\"forceCompile\":false,\"customOutput\":\"templates/top.tpl\",\"autoCompile\":true,\"compiler-pug\":{\"enabled\":true,\"pretty\":true}}"

ファイル保存後にpreprosを再起動し、pugファイルの設定を開いてみると、変換先がtplに置き換わっています。

そして、pugファイルを編集して保存すれば、preprosが自動的に、いつもならhtmlファイルになるはずのところを、ちゃんとtplファイルで作成してくれるでしょう。

余談。

今回はpugからtplへの変換としましたが、他の拡張子でも同様に、いつもとは別の変換先に変えられるかもしれません。

なお、phpテンプレートエンジンもsmarty以外を試したいところですが、サーバ側にインストールする必要のあるフレームワークに依存するものばかりであるため、wordpressのテーマなどには使いづらい…。