Leafテンプレートをpugとgulpで生成する仕組みを作る

はじめに

LeafテンプレートのためのCSSファイルをSCSSとgulpでスマートに書けるように用意しました。

せっかくなのでLeafテンプレートもスマートに書きたいということで、HTMLテンプレートエンジンであるpugを使ってみます。せっかくフロントエンドプロジェクトとして分離したので、Leafテンプレートも分離しちゃえという魂胆です。

フロントエンドプロジェクトを更新する

全体像の目標

SCSSファイルのコンパイルができるようになったプロジェクトに追加していきます。フロントエンドのためのプロジェクトがまだ無いという方は先にご用意ください。

今回やることはこの2点。

• ディレクトリを追加する
• gulpfile.jsonを編集する

この他gitignoreの設定などはお好みで。

ディレクトリを追加する

pugファイルを保存するディレクトリとgulpでleafテンプレートにコンパイルした結果を保存するディレクトリを追加します。私の構成ではこのようになります。

(ルート)
├── dist
│   ├── leaf
│   └── css
└── src
    ├── pug
    └── scss

必要なパッケージをインストールする

pugを扱うための必要なパッケージを追加でインストールします。

• gulp-pug
• gulp-rename

SCSSのコンパイル環境を整えるために、gulpの基本的なパッケージを導入しているので今回はシンプルです。

gulp-renameは生成されたファイルの拡張子を変更するために使います。pugをコンパイルすると拡張子がhtmlになります。これに対し、VaporプロジェクトではLeafテンプレートを使うため、拡張子をleafにする必要があります。

gulpfile.jsonを作る

gulpfile.jsonにpugのコンパイルと監視のジョブを書いていきます。

まずはpugファイルのコンパイルです。

task('pug', function () {
  return (
    src([pugファイルを保存するディレクトリ])
      .pipe(plumber({
        errorHandler: notify.onError("ERR: <%= error.message %>")
      }))
      .pipe(pug({
        basedir: "./src/pug"
      }))
      .pipe(rename({
        extname: '.leaf'
      }))
      .pipe([leafファイルを保存するディレクトリ])
  );
});

続いてgulpの監視ジョブにpugのコンパイル処理を追加します。監視したいファイルがあるディレクトリは、今回のケースではpugファイルを保存するディレクトリになります。

watch([監視したいファイルがあるディレクトリ], series('pug'));

leafファイルを参照できるようにシンボリックリンクを作る

フロントエンドのプロジェクトは、Vaporプロジェクトと全く違うところにプロジェクトを置いています。ですので、生成したleafテンプレートファイルをVaporプロジェクトで参照できるように、シンボリックリンクをはっておきます。

Leafテンプレートのタグの書き方

Leafテンプレートでは#count(users)のようなタグを使います。これをpugで書くには|を使ってプレーンテキストとして記載します。

テンプレートソース内の場所によっては|無しでも書けましたが、|付きで書いたほうがわかりやすくなると思います。

まとめ

SCSSファイルのコンパイルと同様、pugファイルを編集して保存する都度leafテンプレートが生成され、Vaporプロジェクトから使用できるようになります。

これでほどよくバックエンド部分とフロントエンド部分を分離できたと思います。プロジェクトのスタイルや体制によっては調整が必要かもしれません。ちょっと使い込んでみて工夫してみたいと思います。