Gulpの続きです。前回はローカルにインストールができました。今回はHTMLテンプレートエンジン「Pug」のコンパイルをやってみたいと思います。メタ言語全体としても自分の中での初コンパイルになります。それではいきましょう！
※参考：前回記事
Gulpインストールでけった〜！！（package.json作り忘れてた。。） - クモのようにコツコツと
※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com
【目次】
- フォルダ作成→移動→package.json作成→Gulpインストール
- gulp-pugのインストール
- ファイルを作る
- gulpfile.jsにgulp.task()を記述
- index.pugの中にFizzBuzzを書く
- コンパイル実行
- headタグなどを加えてコンパイルリベンジ
- インデントを入れてリベンジ！
- 最後に
フォルダ作成→移動→package.json作成→Gulpインストール
Node.jsとnpmはインストール済みの前提にて。（下記でバージョン番号が出れば入っている）
node -v npm -v
まずコンパイルを実行したいフォルダを作成。今回はフォルダ名を「gulp_pug」とした。
ターミナルを起動し、cdコマンド。またファインダーからフォルダをドラッグして移動する。
cd /（フォルダ）/gulp_pug
package.jsonを作成
npm init -y
ローカルにGulpインストール
npm install -D gulp
ここまでは前回と同じ工程。
※参考：Gulpインストールでけった〜！！（package.json作り忘れてた。。） - クモのようにコツコツと
さて次です！
gulp-pugのインストール
こちらの記事を参考に進めてみる。
※参考：GulpでPugの環境を構築！静的HTMLサイトを効率的に作ろう | HPcode
npm install -D gulp-pug
（参考サイトの-seve-devは-Dと同義のようなので省略してみた）
※参考：webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
処理が終わるとpackage.jsonに下記が追記されていた！
"gulp-pug": "^4.0.1"
ファイルを作る
参考ページに基づいて「gulp_pug」フォルダの中に下記のフォルダとファイル一式を追加。
gulp_pug ├pug │├common ││└_layout.pug │└index.pug └gulpfile.js
ちなみに上記のようなディレクトリ構成図はMacでは変換できないようで辞書登録必要。
※参考：ディレクトリ構成図を書くときに便利な記号 - Qiita
「たてみぎ」などの変換名をまだ覚え切れてなくて戸惑うw
gulpfile.jsにgulp.task()を記述
参考ページに基づいてgulpfile.jsに下記のコードを記述。
const gulp = require( 'gulp' ); const pug = require( 'gulp-pug' ); gulp.task( 'pug', function() { return gulp .src([ 'pug/**/*.pug', '!pug/**/_*.pug' ]) .pipe(pug({ pretty: true })) .pipe( gulp.dest( './' ) ); });
- 変数gulp：require ()でgulpを読み込む
- 変数pug：require ()でgulp-pugを読み込む
- gulpの.task()メソッド実行。第一引数はpug、第二引数は無名関数
- 無名関数の中身 gulp.src().pipe().pipe()とチェーンメソッドになっている
- .src()メソッド：第一引数は「○○.pug」ファイル、第二引数は「_○○.pug」以外（!）
- 一つ目の.pipe()メソッド：pug()の中のprettyキーの値をtrueに
- 二つ目の.pipe()メソッド：gulpのdest()で'./'に吐き出す
require()とはなんぞや。こちらによると
※参考：【Node.js入門】requireの使い方とモジュールの作り方まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
requireは、モジュール化されたJSファイルをNode.jsから効率よく読み込んで利用できるようにしてくれます。
ふむふむ。モジュールについては以前も調べた。「部品」のことね。
※参考：【JS】モジュール（import / export）でどんなことができるのか事始めてみた - クモのようにコツコツと
Node.jsの中にあるモジュールを読み込むのがrequire()と。
次、gulp.task()とはなんぞや。こちらにわかりやすくまとまっていました！
※参考：gulpfile.jsの書き方確認。 - Qiita
gulp.task
gulpを使って処理してほしいことを書きます。
gulp.task('プラグイン名',function(){});
これで囲って中に色々書いていきます！
gulp.src('ディレクトリ名')
実行ファイルの場所を指定して、
.pipe(プラグイン名())
で動作。コンパイルなどでファイルが生成される場合は、
.pipe(gulp.dest('ディレクトリ名'));
では吐き出し先を指定と。
ふむふむ。gupプラグインを実行して○○.pugファイルをコンパイルすると。そのコンパイル先はディレクトリ直下にする、といった内容か。
index.pugの中にFizzBuzzを書く
index.pugに以前の記事で書いたFizzBuzzのコードを書いてみる。
※参考：【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文） - クモのようにコツコツと
- var title = 'Pugでフィズバズる'
- var count = 30
section
h1.red #{title}
p Pugで変数、for文、if文を使ってフィズってバズってみた。
ul
- for (var i = 1; i < count+1; i++)
if i % 3 == 0 && i % 5 == 0
li フィズってバズった！
else if i % 3 == 0
li フィズった！
else if i % 5 == 0
li バズった！
else
li #{i}
コンパイル実行
ではいよいよ、コンパイルを実行してみる！
下記のコマンドを…
gulp pug
実行！
-bash: gulp: command not found
ありゃ、ダメか。。コマンドがありませんよ、と。
そうか、前回もやったが、ローカルのコマンド実行はnpxをつけて実行するんだ。
※参考：npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita
npx付けて再実行！
npx gulp pug
どうだ！
……。
文字化け…。そうか、文字コード指定してないもんな。CodePenの癖でhead要素とか書いてないじゃないか。
index.htmlのコードを見てみると…
<section> <h1 class="red">Pugでフィズバズる</h1> <p>Pugで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <li>31</li> </ul> </section>
おお、ちゃんとコンパイルされている！人生初のメタ言語コンパイル成功！！
headタグなどを加えてコンパイルリベンジ
pugファイルをコンテンツだけじゃなく、ちゃんとしたHTMLファイルの内容にする！
冒頭にheadタグなどを追記する。
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
link(rel='stylesheet', href='css/common.css')
title 初めてのPugこんぱいる
meta(name='description', content='Pugコンパイルに初めて挑戦！メタ言語コンパイル自体も初挑戦です。')
body
- var title = 'Pugでフィズバズる'
- var count = 30
section
h1.red #{title}
p Pugで変数、for文、if文を使ってフィズってバズってみた。
ul
- for (var i = 1; i < count+1; i++)
if i % 3 == 0 && i % 5 == 0
li フィズってバズった！
else if i % 3 == 0
li フィズった！
else if i % 5 == 0
li バズった！
else
li #{i}
閉じタグがないから末尾は追加不要！
実行！
npx gulp pug
どうだ？
おお、今度は文字化けしない！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/common.css"> <title>初めてのPugこんぱいる</title> <meta name="description" content="Pugコンパイルに初めて挑戦！メタ言語コンパイル自体も初挑戦です。"> </head> <body> <section></section> <h1 class="red">Pugでフィズバズる</h1> <p>Pugで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <li>31</li> </ul> </body> </html>
が、for文が最後の1回しか実行されてない？
インデントを入れてリベンジ！
もしかしたらfor文のあとのif文がfor文と同じ階層のインデントなのが原因か？と予想。if文をもう1段下げてみる。
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
link(rel='stylesheet', href='css/common.css')
title 初めてのPugこんぱいる
meta(name='description', content='Pugコンパイルに初めて挑戦！メタ言語コンパイル自体も初挑戦です。')
body
- var title = 'Pugでフィズバズる'
- var count = 30
section
h1.red #{title}
p Pugで変数、for文、if文を使ってフィズってバズってみた。
ul
- for (var i = 1; i < count+1; i++)
if i % 3 == 0 && i % 5 == 0
li フィズってバズった！
else if i % 3 == 0
li フィズった！
else if i % 5 == 0
li バズった！
else
li #{i}
実行！
npx gulp pug
どや？
やた！ちゃんとループが実行された！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/common.css"> <title>初めてのPugこんぱいる</title> <meta name="description" content="Pugコンパイルに初めて挑戦！メタ言語コンパイル自体も初挑戦です。"> </head> <body> <section></section> <h1 class="red">Pugでフィズバズる</h1> <p>Pugで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <li>1</li> <li>2</li> <li>フィズった！</li> <li>4</li> <li>バズった！</li> <li>フィズった！</li> <li>7</li> <li>8</li> <li>フィズった！</li> <li>バズった！</li> <li>11</li> <li>フィズった！</li> <li>13</li> <li>14</li> <li>フィズってバズった！</li> <li>16</li> <li>17</li> <li>フィズった！</li> <li>19</li> <li>バズった！</li> <li>フィズった！</li> <li>22</li> <li>23</li> <li>フィズった！</li> <li>バズった！</li> <li>26</li> <li>フィズった！</li> <li>28</li> <li>29</li> <li>フィズってバズった！</li> </ul> </body> </html>
CodePenでは実行されても実際のpugファイル上では挙動が違うことがあるんだなー。インデントが厳密。
最後に
ということで、pugのコンパイルをなんとか成功しました！pugというかメタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）全体の中で人生初のコンパイルなので自分の中では大きな一歩です♪次回は同じくHTMLテンプレートエンジン、EJSのコンパイルにトライしたく。それではまた！
※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com
