Webデザイナーまたは開(kāi)発者として、私たちは皆、HTMLのかなりのシェアを書かなければならない可能性があります。そして、これは最も難しい作業(yè)ではありませんが、しばしば少し退屈または反復(fù)的に感じることがあります。これは、パグHTMLプリプロセッサが入ってくる場(chǎng)所です。

HTMLも靜的です。つまり、動(dòng)的データを表示する場(chǎng)合（たとえば、APIからフェッチします）、JavaScript內(nèi)のHTMLスティングのミシュマッシュになります。これは、デバッグして維持する悪夢(mèng)になる可能性があります。 Pugは、ノードおよびブラウザ用のテンプレートエンジンです。 HTMLにコンパイルし、単純化された構(gòu)文を備えているため、生産性が高まり、コードがより読みやすくなります。 PUGは、再利用可能なHTMLを簡(jiǎn)単に作成し、データベースまたはAPIから引用したデータをレンダリングすることを簡(jiǎn)単にします。 このガイドでは、Pugで起きて実行する方法を示します。まず、NPMからインストールし、基本的な構(gòu)文を確認(rèn)してから、PUGでJavaScriptを使用する例をいくつか見(jiàn)てみましょう。最後に、Pugをテンプレートエンジンとして使用するシンプルなノード/Expressプロジェクトを構(gòu)築することにより、Pugのより高度な機(jī)能をいくつか検討します。

キーテイクアウト

以前はJadeとして知られていたPugは、HTMLにコンパイルするテンプレートエンジンであり、特にダイナミックコンテンツを扱う場(chǎng)合、より読みやすいコードを作成するのに役立ちます。

動(dòng)的データのHTMLへの統(tǒng)合を簡(jiǎn)素化し、データ駆動(dòng)型のアプリケーションに最適ですが、小さな靜的サイトや最小限の動(dòng)的コンテンツには必要ありません。

インストールには、ノード、NPM、およびPUG-CLIパッケージのセットアップが含まれます。編集者には、開(kāi)発の容易さを推奨する構(gòu)文が強(qiáng)調(diào)表示されます。

PUGは、閉鎖タグなしの単純化された構(gòu)文を使用し、インデントに依存してHTMLドキュメントを構(gòu)造化します。これにより、書かれたコードの量を大幅に削減できます。

動(dòng)的テンプレートのJavaScript統(tǒng)合をサポートし、PUGファイルで変數(shù)、反復(fù)、條件を直接許可します。
• チュートリアルは、ノード/ExpressプロジェクトでPUGを使用した実用的なデモンストレーションで終了し、スタッフディレクトリを作成し、再利用可能なコードのテンプレート継承やミキシンなどの高度な機(jī)能を紹介します。
• パグは何に使用されますか？
• パグを見(jiàn)始める前に、関係する概念を理解するために少し時(shí)間をかけましょう。
• テンプレートエンジンは、テンプレート（多くの言語(yǔ)のいずれかを使用して書くことができる）をHTMLにコンパイルする責(zé)任があるプログラムです。テンプレートエンジンは通常、外部ソースからデータを受信し、コンパイルするテンプレートに注入します。これは、次の図で示されています クレジット：Dreftymac、TempengWeb016、CC BY-SA 3.0

  このアプローチを使用すると、データに基づいて動(dòng)的要素を定義しながら、靜的Webページ要素を再利用できます。また、懸念の分離を促進(jìn)し、アプリケーションロジックを表示ロジックから分離します。

  サイトまたはWebアプリケーションがデータ駆動(dòng)型である場(chǎng)合、テンプレートエンジンの恩恵を受ける可能性が高くなります。たとえば、従業(yè)員を管理するためのスタッフディレクトリ、ユーザーが購(gòu)入できるさまざまな製品をリストするWebストア、または動(dòng)的なサイトを使用する機(jī)能を検索します。
  APIから少量のデータを取得している場(chǎng)合（この場(chǎng)合はJavaScriptのネイティブテンプレート文字列を使用できます）、または小さな靜的サイトを作成している場(chǎng)合は、テンプレートエンジンは必要ありません。
  ちょっとした歴史

  また、2015年の商標(biāo)請(qǐng)求のためにパグが名前を変更することを余儀なくされるまで、パグはジェイドと呼ばれていたことも注目に値します。名前の変更はバージョン2.0で有効になりました。

  オンラインで入手できるジェイド関連の素材はまだたくさんあります。そして、それのいくつかはおそらくまだ非常に有効ですが、名前の変更がメジャーバージョンのバンプと一致したという事実は、Pugの構(gòu)文に前任者と比較していくつかの違い、非推奨、除去があることを意味します。これらはここに文書化されています。
  もっと知りたい場(chǎng)合は、このgithub問(wèn)題で元の名前の変更アナウンスを読むことができます。それ以外の場(chǎng)合は、パグ関連のGoogle検索に「テンプレート」という単語(yǔ)を追加して、犬に満ちていることを避けてください。

  PUGのインストール

  パグを書く前に、ノード、NPM（ノードがバンドルされている）とPUG-CLIパッケージをインストールする必要があります。

  ノード/npmをインストールするためのいくつかのオプションがあります。プロジェクトのホームページにアクセスして、システムの正しいバイナリをダウンロードするか、NVMなどのバージョンマネージャーを使用します。可能な限りバージョンマネージャーを使用することをお?jiǎng)幛幛筏蓼?。これにより、さまざまなノードバージョンをインストールして自由に切り替えることができるためです。また、潛在的な権限エラーの束も無(wú)効になります。

  より詳細(xì)なガイドを得るには、「NVMを使用してnode.jsの複數(shù)のバージョンのインストール」というチュートリアルをご覧ください。

  ノードとNPMがシステムにインストールされたら、次のようにPUG-CLIパッケージをインストールできます。

  インストールプロセスがパグを入力することで正しく実行されたことを確認(rèn)できます。これにより、パグのバージョンとインストールしたCLIのバージョンが出力されます。

  執(zhí)筆時(shí)點(diǎn)で、これは次のとおりでした：

  編集者で強(qiáng)調(diào)表示

  編集者がPUGの強(qiáng)調(diào)表示を提供していない場(chǎng)合は、この機(jī)能を追加するための拡張機(jī)能を探すことをお?jiǎng)幛幛筏蓼埂?

  これを改善するために、崇高なパグパッケージをインストールできます：

  

  構(gòu)文の強(qiáng)調(diào)表示により、特に長(zhǎng)さのファイルを使用することがはるかに簡(jiǎn)単になります。
  をインストールせずにPUG HTMLを試してみてください

  このチュートリアルのより簡(jiǎn)単な例をフォローしたい場(chǎng)合は、さまざまなオンラインコードの遊び場(chǎng)で実行することもできます。 たとえば、

  Codepenには、Pug Supportがすぐに焼き付けられています。新しいペンを作成してから、>html

  を選択し、PreprocessorとしてPugを選択します。これにより、PUGコードをHTMLペインに入力して、結(jié)果がリアルタイムで表示されるのを確認(rèn)できます。 追加のボーナスとして、HTMLペインのダウン矢印をクリックして、を表示するを選択して、PUGが生成したマークアップを確認(rèn)することができます。 PUG HTMLの基本的な構(gòu)文

  パグがインストールされたので、試してみましょう。 Pug-examplesという名前の新しいディレクトリを作成して変更します。次に、HTMLと呼ばれるさらにディレクトリを作成し、index.pug：

  というファイルを作成します。

  注：touchコマンドはlinux/macos固有です。 Windowsユーザーはエコーを行います。> index.pug同じことを達(dá)成するために。

  これが機(jī)能する方法は、Pug CodeをIndex.pugに記述し、Pug-Cliにこのファイルを変更してもらうことです。任意の検出がある場(chǎng)合、index.pug.pugの內(nèi)容を取得し、HTMLディレクトリでHTMLとしてレンダリングします。 これをキックオフするには、Pug-Examplesディレクトリにターミナルを開(kāi)き、これを入力してください。

  次のようなものが表示されるはずです：

  <span>npm i -g pug-cli
  </span>

  注：上記のコマンドでは、-wオプションは時(shí)計(jì)の略で、ドットはパグに現(xiàn)在のディレクトリのすべてを見(jiàn)るように指示します。 -pオプションは出力をprettiftiftiftiftifistiftifistiftifistiftifistiftifistiftiftify 上記のスクリーンショットからページを作成しましょう（構(gòu)文の強(qiáng)調(diào)表示の欠如について不平を言っているもの）。以下をindex.pugに入力してください：

  pug.indexを保存し、./html/index.htmlの內(nèi)容を検査します。次のことを確認(rèn)する必要があります。

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  悪くない、え？パグCLIは私たちのパグファイルを取得し、それを通常のHTMLとしてレンダリングしました。

  この例は、パグに関するいくつかの重要なポイントを強(qiáng)調(diào)するのに役立ちます。第一に、それは空白に敏感です。つまり、パグはインデンテーションを使用して、どのタグが互いにネストされているかを解決することを意味します。たとえば、

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  上記のコードはこれを生成します：

  このコードを取ります：

  pug <span>-w . -o ./html -P
  </span>

  これにより、次のことが生成されます
  インデントのレベルは実際には問(wèn)題ではありません（必要に応じてタブを使用することもできます）が、インデントのレベルを一貫性に保つことを強(qiáng)くお?jiǎng)幛幛筏蓼?。この記事では?つのスペースを使用します。

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  第二に、パグにはクロージングタグがありません。これは明らかにあなたにかなりの數(shù)のキーストロークを節(jié)約し、清潔で読みやすい構(gòu)文をパグします。

  基本的なパグを処理したので、その構(gòu)文をすばやく見(jiàn)てみましょう。これのいずれかが混亂しているように見(jiàn)える場(chǎng)合、またはより詳細(xì)に進(jìn)みたい場(chǎng)合は、プロジェクトの優(yōu)れたドキュメントを必ず參照してください。

  doctype

  PUGを使用して、ドキュメントタイプの宣言を數(shù)多く生成できます。 たとえば、

  doctype htmlは標(biāo)準(zhǔn)のhtml5 doctypeであるにコンパイルされますが、doctype strictは。 Pugは、その出力がドキュメントタイプに有効であることを確認(rèn)するために最善を盡くします。

  タグ

  前述のように、パグにはクロージングタグがなく、ネストのインデントに依存しています。これには少量の慣れが必要になる場(chǎng)合がありますが、一度実行すると、クリーンで読みやすいコードが作成されます。例として：

  上記のコードはこれにまとめます：

  <span>npm i -g pug-cli
  </span>

  パグは、私たちにとって自己閉鎖タグ（要素など）を閉じるのに十分賢いことに注意してください。

  クラス、ID、屬性

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  クラスとIDは、.classNameおよび#idname Notationを使用して表現(xiàn)されます。たとえば、

  パグは私たちに便利なショートカットも提供しています。タグが指定されていない場(chǎng)合、それは

  要素を想定します：

  これらの両方のコンパイル：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  屬性は、括?。?pre class="brush:php;toolbar:false">pug <span>-w . -o ./html -P </span>