HTMLテンプレートのPugを使えば、より効率的なコーディングができるようになります。

ここでは最も簡単なPugの導入方法をご紹介します。

Node.js?! npm?!

まずはPugの公式サイトから見てみましょう。

Getting Started – Pug

Pug is available via npm:

pug

Pugはnpmから入手できます? ナニソレ……

と思った方は、入り口を変えた方が良さそうです。npmはNode.jsのパッケージ管理ツールです。つまりPugをやるにはNode.jsを使うんですね。ナニソレ……

Preprosでコンパイルする

ということで、PugをやりたいがためにNode.jsを導入するのはハードルが高すぎるので、すでにNode.jsを利用している人以外はやめておきましょう。

PugをHTMLに変換してくれるGUIコンパイラがちゃんとありますので、それを利用すれば簡単にPugを導入できます。コンパイラは無料で始められる「Prepros」 がおすすめです。

Prepros

上のリンク先からダウンロードしてインストールしましょう。あとは直感的に使えそうな感じです。

一応使い方を書いておくと、Add Projectでフォルダを選んでPROJECTSに追加したら、pugを選択してProcess Fileをクリック。これでhtmlが生成されます。Auto Compileにチェックを入れておけば、pugを更新するたびにコンパイルされます。

プロジェクトごとにコンパイル形式などを設定できますので、Setting>Compiler Settingsで確認しましょう。

ちなみにSassのコンパイラにはAutoprefixerもついています。素敵ですね。

なお、トライアル版を使っていると、かなりの頻度でセールスのポップアップが表示されます。すぐに消して続行できるのですが、一瞬とはいえ強制的にコーディング作業を中断させられるので、仕事で使うなら購入した方が良いでしょう。

でも、それだけ我慢すれば無料で使い続けることができますので、中途半端なお試し期間や限定された機能にモヤっとさせられることはありません。試しに使って損することはないと思います。

肝心の記法については別の記事で紹介できたらと思います。