今更だけどPugを使ってみました
前から存在は知っていたものの使おうとしなかったPug。
なぜかというと、今はエディタが優秀なので、htmlを書く手間は昔に比べると格段に減り、
Pugを使う必要性を感じなかったからです。
その前にPugが何かというと、
簡単に言うと、テンプレートエンジンです。
Ruby(rails)で言うslim,PHPでいう,twigとかsmartyみたいな？
バッグエンドやっている人はわかりますが、フロントエンドの初級者の方はイメージつかないかもしれません。
javascriptで言うjQueryみたいな(これは違いますが感覚として)
要は簡単に書けるようになるツールです。
Pugで書いたもの
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | doctype html html(lang="ja") head meta(charset='utf-8') meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1") meta(name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes") title タイトル meta(content="", name="description") meta(content="", name="keywords") link(rel="stylesheet",href='/common/css/reset.css') body #wrapper .body#body .content h1 タイトルがここに入ります。 .text | テキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入ります br a(href="#") リンク .footer p フッター |
コンパイルすると、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes"> <title>タイトル</title> <meta content="" name="description"> <meta content="" name="keywords"> <link rel="stylesheet" href="/common/css/reset.css"> </head> <body> <div id="wrapper"> <div class="body" id="body"> <div class="content"> <h1>タイトルがここに入ります。</h1> <div class="text">テキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入りますテキストがここに入ります<br><a href="#">リンク</a></div> </div> </div> <div class="footer"> <p>フッター</p> </div> </div> </body> </html> |
こうなったりします。
書くのが早くという風になるかわかりませんが、
インデントは普通のhtmlと違い、重要という必須なので、
書き方のルールが決められますが、
コードのメンテナンス性、人によってコードの綺麗さにバラツキが出ないのがいいかもしれません。
また、パーツ化出来るので、ヘッダー、フッター、共通部分をパーツにわけると、
途中でその部分が変更になった時も全ページ変える必要もなくなります。
公式サイトではExpressとありますが、
gulpの方が良いかと思います。
本来であればgulp,gulpでの設定も書くべきですが、また改めてということで、
まずは有名なブログを紹介させて頂きます。
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
Author Profile
スターフィールド編集部
SHARE
