初心者が簡単に【Pug】を導入する方法|Preprosでコンパイル

Tools

HTMLをsassっぽく書けるテンプレートエンジン「Pug」を使えば、より効率的なマークアップが可能です。

しかし、いろんな技術サイトを見ると、初心者には何やら難しそうなことがつらつらと書き綴られていて、ちょっと取っつきにくい印象があります。

ここでは、単純にHTMLを速く書きたいというだけの方に、最も簡単なPugの導入方法をご紹介します。

Node.jsって?! npmって?!

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

Getting Started – Pug

Pug is available via npm:

pug

Pugはnpmから入手できます。

npmはNode.jsのパッケージ管理ツールです。つまりPugをやるにはNode.jsを使うので、まずはそこから導入していく必要があります。

Pugに興味を持って、とにかくPugを使ってみたいんだ、と思っている方は、もう少し手軽な方法を選んだ方が良いかもしれません。

Preprosでコンパイルする

ということで、Node.jsなしでPugを導入する方法です。

PugをHTMLに変換してくれるGUIコンパイラを使います。そしたらただPugを書いて、コンパイルするだけです。

コンパイラは無料で始められる「Prepros」 がおすすめです。

Your Friendly Web Development Companion

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

一応使い方を書いておくと―

  1. 「Add Project」で作業フォルダを選び、「PROJECTS」に追加する。
  2. pugを選択して「Process File」をクリック。これでhtmlが生成されます。
  3. 「Auto Compile」にチェックを入れておけば、pugを更新するたびにコンパイルされます。

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

PreprosはSassコンパイルにもオススメ

個人的には、PugをやるんだったらCSSも「Sass」で書くことをオススメします。構文が似てるので。

PreprosにはAutoprefixerもついていますので、Sassをコンパイルするとき自動的にベンダープレフィックスを付けることも可能です。素敵ですね。

試して損はない!

なお、トライアル版を使っていると、かなりの頻度でセールスのポップアップが表示されます。

すぐに消して続行できるのですが、一瞬とはいえ強制的にコーディング作業を中断させられるので、仕事で使うなら購入した方が良いでしょう。

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

肝心の記法については別の記事で紹介していきます。

コメント

タイトルとURLをコピーしました