どうもユーキです。

gulp4を使ってWeb制作の効率をあげようPug(Jade)/HTML編です。

今回から実際にファイルを変換できるようにして開発環境を整えていきます。
今回は、Pugを使ってHTMLファイルに変換できるようにしていきます。

ちなみに、準備編に目を通してない方は先にこちらをどうぞ！

Pug(Jade)とは？

もともとはJadeと呼ばれており、version2からPugという名前に変わりました。

このPugというものは、HTML用のJavascriptテンプレートエンジンです。

一定の記述ルールがあるおかげで、素のHTMLよりも記述を短くすることができます。

Pug記述のルール

まず、基本的にはインデントで親子の階層関係を表します。
なので、インデントを普段からつけている人にはかなり入りやすいかなと思います。

普段はあまりインデントをつけてない人はこれを機につけるようにしていきましょう！

これであなたも立派なインデンターです！（？）

その他ルールというかPugでできることは、こんな感じです。

• HTMLタグの<>を書かなくてよい、閉じタグもいらない
• classやidを短く記述可能
• Pug上でJSがつかえる、Pug用の関数もつくることができる
• 別のPugファイルを読み込ませたり、レイアウト用のPugファイルを作ってそれを元にHTMLを作ることが容易

あげればキリがないのですが、通常のHTMLを使うよりもかなりメリットがあります。
特に運用するときなど修正が多い場合に力を発揮します。

学習コストもほとんどかからずに習得が可能です。積極的に使って覚えましょう！

インストール

メリットもわかったところで、早速インストールしたいところですが、その前に、今回はどんなファイル構成にするのか先に決めておきます。

ファイル構成は、

.
├── _app
│   ├── gulpfile.js
│   ├── package-lock.json
│   ├── package.json
│   └── src
│       └── html
│           └── index.pug
└── html
    └── index.html

• /_app/　直下にgulpの設定周りのファイルを置く
• /_app/src/　以下に変換元のファイル置く（Pugファイルとかを置く）
• /html/　以下に変換後ファイルが置かれるようになる（変換後に出力されるので、現状は_appのみで大丈夫です）

といった構成になります。

gulpfile.jsに変換後のディレクトリを直接指定してもいいのですが、リネームしたい場合などディレクトリ名だけかえればOKといった感じで、作業者が使いやすいよう汎用性を持たせるためにこの構造にしておいてます。

ファイル構成はプロジェクトや案件ごとに自分で使いやすい状況にしたほうがいいです。適宜扱いやすい状態にしましょう。

前置きが長くなりましたが、インストールはこちらです。

cd _app/
npm install -D gulp-pug

Pug用のタスクを追加

まずは、PugファイルからHTMLファイルに変換するタスクを書きます。

// 必要なモジュールを読み込む
var
  gulp = require('gulp'),
  pug = require('gulp-pug');

// タスクを指定する
gulp.task('default', pugTask);

// pug用の関数
function pugTask(done) {
  gulp.src('./src/**/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('../'));

  // 処理終了
  done();
}

こんな感じになります。

ちなみに無名関数を利用して書くと

// タスクを指定する
gulp.task('default', function (done) {
  gulp.src('./src/**/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('../'));

  // 処理終了
  done();
});

アロー関数で書くと

gulp.task('default', (done) => {
  gulp.src('./src/**/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('../'));

  // 処理終了
  done();
});

と書くことも可能です。ぐぐってみるとどっちかで書かれてることが多いですね。（自分のgithubで公開してるものも無名関数使ってます）

ということで、早速内容をそれぞれ解説していきます。

gulp.task

gulpのタスクを作成する関数です。

バージョンが3.xだと、

gulp.task('タスク名', [['依存タスク名']], 関数)

となっており、依存タスクを配列で書くことが可能でしたが、4系からは変わってます。

gulp.task('タスク名', 関数)

依存タスクの記述が省かれ、シンプルになりましたね！

じゃあ依存タスクどうすんのって思ってる方、以下に説明書いておきます。
とりあえずいいやって方は飛ばしてしまっても大丈夫です！

依存タスクとは？

別のタスクも一緒に動かしたい、動かす必要があるときに指定すると一緒にタスクが動作してくれます。

今回は実装しませんが、連載のどこかでローカルサーバー起動・リロードするタスクを作ります。

そのタスクをPugからHTMLに変換がかかった際に実行されれば、変換がかかったあとにリロードがかかるようにできますよね？

いちいちブラウザに戻って更新かけるという手間を省くことができます。効率がいいですね！

バージョン4.xで依存タスクを書きたい場合は、gulp.series関数を使って表します。（gulp.parallel関数というものもありますが、こちらは並列処理で使用します）

// 3.x

gulp.task('task1', ['task2', 'task3'], () => {
  // 処理
});

// 4.x

gulp.task('task1',
  gulp.series(['task2', 'task3'], (done) => {
    // 処理
    done(); // done関数も4.xから必要になりました
  })
);

このように置き換えられました。

gulp.src

対象となるファイルを指定する関数です。
pipe関数でつないでいき、順々に処理を実行していきます。

gulp.src(globs, [options])

globsっていうのは、パターンにマッチするディレクトリやファイルのパスを表します。「*」「?」などのワイルドカードを使用可能です。

gulp.src('./src/**/*.pug')

./src/以下にある.pugファイル全てが対象になります。

特定のディレクトリを除外したい場合は、!（エクスクラメーションマーク）を使うことで実現できます。

gulp.src(['./src/**/*.pug', '!./src/parts/**/*.pug'])

のように書くと、./src/parts/ディレクトリを以下のpugファイルは対象外にすることができます。

pug

最初にpug = required(‘gulp-pug’)をして、pugという関数を使えるようにしてあります。
この関数でPugファイルからHTMLファイルに変換をかけています。

引数にはoptionを設定できます。

ここでは、pretty: trueという指定をしていますが、これは、インデントや改行をいれるかどうかというオプションです。
デフォルトはfalseになっていて、1行で全て表示されてしまうため、非常に読みづらいです。

例えば、ファイルサイズを少しでも軽くしたいときは、余計な改行やインデントが無い方が軽くなりますよね？
そんなときにfalseにすればいいです。

その他のオプションもたくさんありますが、今回は端折ります。細かく実装するときに解説していきます。

どんなオプションが有るか気になる方は下記に載っているのでみてください。

gulp-pugのGitHub
PugのAPIリファレンス

gulp.dest

ファイルの出力先を指定する関数です。
pipe関数で伝わってきた情報を指定した出力先に吐き出します。

gulp.dest(path, [options])

さらに細かく知りたい場合は、英語ですが、公式ドキュメントに載っているので見てみてください！

Pugファイルを作成

まずは、ファイルの内容です。index.pugというファイルを/_app/src/html/に作りましょう！

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title gulpテスト
  body
    h1 gulpテスト

つくりましたでしょうか？HTMLがわかればぱっと見でなにやってるのか大体わかりますよね。
しかもめちゃくちゃスッキリしてませんか？

単純にh1タグでgulpテストと表示するファイルを素のHTMLで書いてみます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>gulpテスト</title>
  </head>
  <body>
    <h1>gulpテスト</h1>
  </body>
</html>

明らかにスッキリしてますよね。
本来であれば、ヘッダー、グローバルナビゲーション、サイドバー、メインコンテンツ、フッター…などなど膨大なタグの嵐になるところが、シンプルでわかりやすくなります。

PugをHTMLに変換

ファイルも作成したので、早速変換してみましょう！

cd _app/
gulp

うまく実行されましたか？

html/index.htmlができてるか確かめてみましょう！
できてれば変換成功です！

これでpugは変換できるようになりました。

まとめ

これでPugをHTMLに変換できるようになりました。
変換前のファイルはシンプルにでき、出力する際にも簡単に余計な改行を消したりできるということはわかったと思います。

今回はまずPugを動かしてみただけなので、実際はもう少しカスタマイズして使いやすくできます。

次回は

• 保存されたら変換がかかる
• 変換したときに自動でリロードがかかるようにする
• パーツ分けをする、JSを利用する

を実装していきます！