※この記事はQiita(gulp v4 による Pug × SCSS × TypeScript テンプレ)にも投稿されているものです。

(」・ω・)」はじめに

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

(／・ω・)／概要

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

gulpとpug の説明（すごいざっくり）
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 にも書きましたがこちらにも書きます。

ちなみに、 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 をインストールします。

$ npm install --global gulp-cli

⑶ pug をインストールします。

$ 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 によるコンパール設定が書いてます。

...
├─ gulpfile.ts
├─ src
│  ├─ pug
│  │  ├─ include
│  │  │  └─ _base.pug
│  │  └─ index.pug
│  ├─ scss
│  │  └─ style.scss
│  └─ typescript
│     └─ main.ts
└─ dist // 保存時自動コンパイルされてこちらに格納されます。
   └─ assets
      ├─ css
      │  └─ style.css
      ├─ js
      │  └─ main.js
      └─ index.html

`Pug` ディレクトリの中身

src > pug > include >_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]
    link(rel="shortcut icon" href="")
    block headVendor
    script(src="/js/main.js")
    block head
  body
    block body

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

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?

(／・ω・)／おわりに

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