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

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

(」・ω・)」はじめに

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

(/・ω・)/概要

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

  • gulppug の説明(すごいざっくり)
  • 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 やるで必要あるのかなあと思い追加せず。

  • 保存時自動コンパイル
    • PugHTML
    • SCSSCSS
    • TypeScriptJavaScript
  • CSS にプリプロセッサ付与
  • ( Normalize.css がデフォで入っています)

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

例: _hogehoge.pug

使い方

0. gulpPug のセットアップ

gulpPug がすでに入っている場合はここを飛ばしてください

nodenpm と (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

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

# 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 ファイルや scssts をいじって保存したらコンパイルされているはずです…!

テンプレのディレクトリ構成

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

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

...
├─ 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.puginclude するといいかんじになります。
っていうところまでテンプレで実装されています。

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🐶

(/・ω・)/おわりに

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

%d人のブロガーが「いいね」をつけました。