gulpでpugをコンパイル〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜

Table of Contents

さて前回はpug(jade)を使ってみました。

ただ毎回コマンドを打つのはあまりにも億劫なのでgulpというものを使って自動化しましょう。

細かいことはさらっと済ませてちょちょっとやってしまいましょうね。

gulpとは
gulpのインストール（pug用のパッケージもインストール）
gulpfile.jsを書く
実行してみる
自動タスクを実行してみる

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

ができたと思います。

できていなかったらどっかで間違えているのかもしれないで見直してみてください。