出典：Pug（HTMLテンプレートエンジン）の書き方まとめ
出典：GulpでPugの環境を構築！静的HTMLサイトを効率的に作ろう
Pugとは
Pug：HTMLのテンプレートエンジンの１つ (旧Jade)
Gulpとは
Gulp：Node.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツール。
様々な処理や作業を自動化してくれるタスクランナー。
PugとGulpのインストール
以下ラズパイ上で行っている。
$ npm install pug
$ npm install gulp
$ npm install gulp-pug$ gulp -v
CLI version: 2.3.0
Local version:4.0.2フォルダ構成
testpug─┬─pug─┬─test.pug
│ └─test2.pug
├─gulpfile.js
├─(test.html)←test.pugからこのファイルができる
└─(test2.html)←test2.pugからこのファイルができるgulpfile.js
var gulp = require( 'gulp' );
var pug = require( 'gulp-pug' );
gulp.task( 'cmdpug', function() { //タスク名：cmdpug
return gulp
.src([ 'pug/**/*.pug', '!pug/**/_*.pug' ]) //srcは、pugフォルダ以下にある拡張子.pugファイル、但し_で始まるファイルは除く
.pipe(pug({
pretty: true //改行、インデントありでpug実行？
}))
.pipe( gulp.dest( './' ) ); //出力先：このフォルダ
})test.pug
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
title タイトル
body
#content
.inner
p Hello Pug!
script(src='js/script.js')test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<div id="content">
<div class="inner">
<p>Hello Pug!</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>test2.pug
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
title Pug練習ページ
body
h1 パグ（Pug）のページ
section
h2 ご挨拶
p 皆さんこんにちは、パグと言っても犬ではありません
ul
li 昔はJadeと呼ばれていました
li JavaScriptで使用されるHTMLを出力するためのテンプレートエンジン
li テンプレートエンジンって何？ 難しいtest2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Pug練習ページ</title>
</head>
<body>
<h1>パグ（Pug）のページ</h1>
<section>
<h2>ご挨拶</h2>
<p>皆さんこんにちは、パグと言っても犬ではありません</p>
<ul>
<li>昔はJadeと呼ばれていました</li>
<li>JavaScriptで使用されるHTMLを出力するためのテンプレートエンジン</li>
<li>テンプレートエンジンって何？ 難しい</li>
</ul>
</section>
</body>
</html>gulpの実行
testpugフォルダで、$ gulp cmdpug とすれば、フォルダ内にtest.html、test2.htmlが生成される。
pi@raspberrypi:~/testpug $ gulp cmdpug
[18:39:21] Using gulpfile ~/testpug/gulpfile.js
[18:39:21] Starting 'pug'...
[18:39:21] Finished 'pug' after 331 ms