謎のHTMLテンプレートエンジン!Pugでハローワールドする!!


こんにちわ。フロントエンドエンジニアのホットドッグちゃんです。

フロントエンドの世界は時代の流れが速すぎます。。。

 

先日Sassでわからない事があったのでgoogleしてたら(ググってたら)突然PugというWordが出てきました。

 

私: 「また新しいの出てきたの?お前はの寿命はながいのか?」

Pug: 「わん! 私はJade2.0.0からPugに進化したんだよ!」

私: 「進化したって事は実績があるんだね。」

 

というので重い腰を上げドキュメントを読みました。

 

そして私。。。早速Pugに恋に落ちました。

 

Pugとはホントにパグでした。

この子がパグです。↓


かわいいですよね!

 

公式ドキュメント↓

https://pugjs.org/api/getting-started.html
このPug、以前Jadeとよばれてたみたいで、進化してPugになったみたいです。

Jade2.0.0 → Pug (2.0はキーワードですね!!)

 

ところでPugとは何ですか??

Pugはみんな大好きNode.jsで動くHTMLのテンプレートエンジンです!!

sassのようにファイルを分割してインクルードで読み込んだりできます!!

 

それだけでもすごく便利ですね!

あと他にもあるみたいですが、後ほど。。。

 

とりあえずいつものようにHello Worldしてみましょう!!(久しぶり!)

 

コレがPugです!!

タグで囲んだりしません!

シンプル!!マークダウンよりシンプル!!

このPugをコンバートすると↓↓

簡単ですね!!次回もお楽しみー

 

※次回はNode.jsからpugのインストールも丁寧に説明します。

関連の記事desu