さて前回はpug(jade)を使ってみました。
ただ毎回コマンドを打つのはあまりにも億劫なのでgulpというものを使って自動化しましょう。
細かいことはさらっと済ませてちょちょっとやってしまいましょうね。
gulpとは
ガルプと読むらしいです。
gulpはタスクランナーと呼ばれるツールの一種で、要はタスク（件のpugをhtmlに変換するとか）をまとめて一つのコマンドでできるようにしたりさらには自動的に実行できる様にするためのツールです。
厳密にはビルドシステムヘルパーらしいですがまあ多分似た様なものなのでとりあえず
gulp=タスク自動化
と思っておけばいいんじゃないでしょうか。
公式のサイトにも「Automate and enhance your workflow」と書いてあります。
pugやjade、sassなどを使ってみようとググってみるといきなりgulpをインストールしましょうとか言われることが多くgulp=pugやsassのためのツールと勘違いしがち（私だけ？）ですが別にpugやsassなどとは関係ない、独立したツールであるということを理解しておきましょう。
便利なタスク自動化ツールをpugやsassにも使っているだけの話です。
さ、便利なら使いましょう。
gulpのインストール（pug用のパッケージもインストール）
gulpをインストールして使っていきましょう。
gulpにもNode.jsが必要なので入れていない人は前回の記事を参考に入れてください。
そのあとは以下を参考にどうぞ。
npmのinitというよくわかんないのと–save-devという怪しげなコンフィグがありますが説明はちょっと長くなるので次回の記事に書こうと思います。
とりあえず何も考えずにコマンドしちゃってくださいい。
//gulpのインストール（どこでやってもいい） npm install --global gulp-cli //作業ディレクトリに移動（好きなところ） //この記事では前回作ったディレクトリ（フォルダ） cd test //npm(パッケージ管理)の初期設定 npm init -y //使うとこにもgulpを入れる npm install gulp --save-dev //gulpでpugをビルドするためのパッケージを追加 npm install gulp-pug --save-dev //ワーニング出ることもあるが無視して大丈夫 //npm WARN testProject@1.0.0 No description //npm WARN testProject@1.0.0 No repository field.
バージョンがどうとかいうワーニングも出ますがこれはgulpのバージョンが上がると消えるらしいので無視して大丈夫です。
gulpfile.jsを書く
gulpfile.jsを作り、gulpに実行させたいタスクを書いていきます。
//initなどしたのと同じディレクトリ
//gulpfile.jsを作る
vim gulpfile.js
```//中身
//プラグインを宣言
var gulp = require('gulp');
var pug = require('gulp-pug');
//pugという名前のtaskを追加
gulp.task('pug', () => {
//pugフォルダ以下の.pugファイルを対象とし
//pugフォルダ以下の_から始まるファイルは除外する
//pug以下のフォルダ構成をそのまま出力先にも適用
gulp.src(['./pug/**/*.pug', '!./pug/**/_*.pug'],{ base: './pug' })
.pipe(pug({
pretty: true//読みやすい形で出力
}))
//htmlフォルダに出力
.pipe(gulp.dest('./html/'));
});
//自動化
//pugフォルダ以下のpugファイルが更新されたら
//pugタスクを実行する
gulp.task('autoBuild', ['pug'], function() {
gulp.watch(['./pug/**/*.pug'], ['pug']);
})
```
こんな感じでpugをコンパイルするタスクを作ってから、そのタスクを自動で実行するタスクを作ります。
_で始まるファイルを除外するのはpugのIncludeなどの機能を利用した時に都合がいいからです。そのうち解説しようと思いますが普段_をファイルの頭につけることはないと思うのでわからない人もとりあえず気にしなくても大丈夫です。
読み込み元や読み込み先のフォルダは好きに変えてもらっても当然動きますのでどうぞ。
,{ base: './pug' }
の部分に関して、gulpでpugをコンパイルする情報は結構あるもののフォルダ構成をそのまま出力先にも持って行っている人ってあんまりいない感じでした。
が、個人的にはそのまま持って行けた方が便利（というか持って行けないと不便）なので探して入れときました。消してもいいです。
Revelとか使う時にこっちの方がいいと思うんですよね。
さて、これで準備が整いました。
実行してみる
実行してみましょう。
まずはpugタスク単体を実行してみます。
その前にテスト用のpugファイルが必要なので適当に作ります。
//pugファイルを置くフォルダ mkdir pug //htmlが作られるフォルダ mkdir html //テスト用のpugファイル vim pug/test1.pug ``` //シンプルな中身適当に doctype html div.example p テスト１ ``` //フォルダ構成もちゃんとなるか見る mkdir pug/testFolder1 vim pug/testFolder1/onFolder1.pug ``` //適当に doctype html div.example p フォルダ1の中１ ``` mkdir pug/testFolder2 vim pug/testFolder2/onFolder2.pug ``` //適当に doctype html div.example p フォルダ2の中１ ``` vim pug/testFolder2/onFolder22.pug ``` //適当に doctype html div.example p フォルダ2の中2 ``` //gulpで全コンパイルじゃ！ gulp pug
はい、これでhtmlフォルダ以下にtest1.html・testFolder1/onFolder1.html・testFolder2/onFolder2.html・testFolder2/onFolder2.html
ができたと思います。
できていなかったらどっかで間違えているのかもしれないで見直してみてください。
自動タスクを実行してみる
最後に自動タスクを実行して、ファイルを編集するたびに勝手にコンパイルする様にしてみましょう。
準備はしてあるのでコマンド一つです。
//実行 gulp autoBuild
はい。終わり。
試しにさっき作ったpugファイルのpタグの中身でも変更して保存してみると、htmlも更新されることがわかると思います。
結構長くなってしまいましたね。お疲れさまでした。
しかしこれで快適にhtmlがかけますね。
次回はnpmのinitと–save-devについて。
そのあとは引き続きsassとTypeScriptをやっていきます。お楽しみに。
ではまた。
