gulp v4 による Pug × SCSS × TypeScript テンプレ

【追記（2020/09/20）】
テンプレート更新しました

# はじめに
- gulp v4 がだいぶ前にリリースされたけど、当方ずっとgulp v3のままだった
- gulp v4 は新しい機能が増えたり書き方が変わったりとすごい変わってしまわれてる
- 今まで自分の作ったものが化石になるのを恐れたのでgulp v4に適用させた
- ついでにテンプレ作って今後楽しようと思った
- **どんどん改善していきたいからみんなに使ってもらいたい、ここで宣伝だ**

# 概要
この記事の概要は以下になります🐶

- [`gulp`と`pug` の説明（すごいざっくり）](#gulp)
- [**Pug × SCSS × TypeScript** テンプレの紹介](#テンプレートを作成しました)
    - [このテンプレでできること](#できること)
    - [このテンプレの使い方](#使い方)
    - [このテンプレ内のディレクトリ構成のお話](#テンプレのディレクトリ構成)
- 🎍🐭🎍🐮🐯🐰🐲🐍🐴🐑🐵🐔🐶🐗

# gulp 
gulp公式サイト
https://gulpjs.com/

- `JavaScript` で書かれたビルドシステム
- `Node.js` をベースとしている
- `SCSS` のコンパイル、`Pug` のコンパイル、ファイルの圧縮など、様々な作業を自動化してくれる

# pug
pug公式サイト
https://pugjs.org/api/getting-started.html

- `HTML` を書くためのテンプレートエンジン
- `JavaScript` のように変数が使える、楽

# テンプレートを作成しました
gulp v4による **Pug × SCSS × TypeScript** のテンプレートを作成しました。
https://github.com/deren2525/gulp4-pug-scss-ts-template

使い方は上記リンクの [README](https://github.com/deren2525/gulp4-pug-scss-ts-template/blob/master/README.md) にも書きましたがこちらにも書きます。

ちなみに、 `pug` じゃなくていい、 `HTML` でいい人は
**HTML × SCSS × TypeScript** のテンプレもあります。
https://github.com/deren2525/gulp4-html-scss-ts-template

## できること
まだ簡単なことしかできないです。今後機能追加していきたい。
Lint系は、私が VS Code の拡張機能に頼っているので `gulp` やるで必要あるのかなあと思い追加せず。

- 保存時自動コンパイル
    - `Pug` → `HTML`
    - `SCSS` → `CSS`
    - `TypeScript` → `JavaScript`
- `CSS` にプリプロセッサ付与
- （ Normalize.css がデフォで入っています）

`pug` ファイルをいくつか生成していくうちに `HTML` として出力してほしくないものが出てくると思います。
その時はファイル名の先頭に `_`  をつけることで `HTML` に出力されなくなります。

例： `_hogehoge.pug`

## 使い方

### 0. `gulp` と `Pug` のセットアップ
**`gulp` と `Pug` がすでに入っている場合はここを飛ばしてください**

⑴ `node` と `npm` と （`npx`） が必要になるので入れていない場合入れてください
https://nodejs.org/ja/

```
# node チェック
$ node -v
v12.14.0
```

```
# npm チェック
$ npm -v
6.13.4
```

```
# npx チェック
$ npx -v
6.13.4
```

⑵ [`gulp`](https://gulpjs.com/) をインストールします。

```
$ npm install --global gulp-cli
```

⑶ [`pug`](https://pugjs.org/api/getting-started.html) をインストールします。

```
$ npm install --global pug-cli
```

### 1. テンプレのインストール

こちらをクローンしてください。
https://github.com/deren2525/gulp4-pug-scss-ts-template

```
$ git clone git@github.com:deren2525/gulp4-pug-scss-ts-template.git
$ cd gulp4-pug-scss-ts-template
$ npm install
```

`gulp` と `Pug` がちゃんと入っているかのチェックも忘れずに🐶

```
# gulp チェック
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2
```

```
# pug チェック
$ pug --version
pug version: 2.0.0-rc.4
pug-cli version: 1.0.0-alpha6
```

### 2. 使う！

うまくいけていたら、`gulp` コマンドで起動されるはずです
http://localhost:3000 へ飛んでみてページが反映されていたら成功です。

```
# 起動
$ gulp
```
`pug` ファイルや `scss`、`ts` をいじって保存したらコンパイルされているはずです...！

## テンプレのディレクトリ構成
基本的に触るのは `src` ディレクトリ配下のものたちになると思います。
`dist` ディレクトリ配下には自動コンパイルされたものが入るので直接手で変えても `src` ディレクトリ配下のファイル達によって上書きされてしまいます。

`gulpfile.ts` に `gulp` によるコンパール設定が書いてます。

```ディレクトリ構成.txt
...
├─ gulpfile.ts
├─ src
│  ├─ pug
│  │  ├─ include
│  │  │  └─ _base.pug
│  │  └─ index.pug
│  ├─ scss
│  │  └─ style.scss
│  ├─ typescript
│  │  └─ main.ts
│  └─  image
│  
└─ dist // 保存時自動コンパイルされてこちらに格納されます。
    ├─ css
    │  └─ style.css
    ├─ js
    │  └─ main.js
    ├─ image
    │  
    └─ index.html
```

### `Pug` ディレクトリの中身
`src > pug > include >_base.pug`
に メタ情報とか書いてます。各々設定してください。

```_base.pug
doctype html
html(lang="ja")
  head
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(charset="UTF-8")
    block title
      title gulp4-html-scss-ts-templete
    meta(name="description", content="")
    meta(name="author", content="")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="/css/style.css")
    //- [if lt IE 9]
    //- script(src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js")
    //- script(src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js")
    //- [endif]

    //- favicon
    link(rel="shortcut icon" href="")

    block headVendor
    script(src="/js/main.js")
    block head
  body
    block body
```

それを `src > pug > index.pug` が `include` するといいかんじになります。
っていうところまでテンプレで実装されています。

```index.pug
extends include/_base

block title
  title ここにタイトルを書くとHTML上では <title></title> 内に反映されます

block append body
  // Place your content here
  // written in the body tag
  // この中に書くと HTML上では <body></body> 内に反映されます
  h1.title gulp4-pug-scss-ts-templete🐶
```

# おわりに
あくまでテンプレなので使っていただける方がもしいましたら、このテンプレから自分でよしなにカスタマイズしちゃってください🐶!
そして使ってみて、
「こんなやり方よりもこんな方法がありますぜ...」とか
「こんな機能があったらよき〜〜」とか
なにか意見をお持ちの方、どんどん改善していきたいので大募集です!!お待ちしております。