Blog

今更だけどPugを使ってみました

前から存在は知っていたものの使おうとしなかったPug。
なぜかというと、今はエディタが優秀なので、htmlを書く手間は昔に比べると格段に減り、
Pugを使う必要性を感じなかったからです。

その前にPugが何かというと、
簡単に言うと、テンプレートエンジンです。
Ruby(rails)で言うslim,PHPでいう,twigとかsmartyみたいな?
バッグエンドやっている人はわかりますが、フロントエンドの初級者の方はイメージつかないかもしれません。
javascriptで言うjQueryみたいな(これは違いますが感覚として)

要は簡単に書けるようになるツールです。

Getting Started – Pug

Pugで書いたもの

コンパイルすると、

こうなったりします。

書くのが早くという風になるかわかりませんが、
インデントは普通のhtmlと違い、重要という必須なので、
書き方のルールが決められますが、
コードのメンテナンス性、人によってコードの綺麗さにバラツキが出ないのがいいかもしれません。

また、パーツ化出来るので、ヘッダー、フッター、共通部分をパーツにわけると、
途中でその部分が変更になった時も全ページ変える必要もなくなります。

公式サイトではExpressとありますが、
gulpの方が良いかと思います。

本来であればgulp,gulpでの設定も書くべきですが、また改めてということで、
まずは有名なブログを紹介させて頂きます。

【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
Pug(Jade)で効率的なマークアップ環境を作る | Tips Note by TAM

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ