【追記（2020/09/20）】
テンプレート更新しました
はじめに
- 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
│ └─ image
│
└─ dist // 保存時自動コンパイルされてこちらに格納されます。
├─ css
│ └─ style.css
├─ js
│ └─ main.js
├─ image
│
└─ 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]
//- favicon
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🐶
おわりに
あくまでテンプレなので使っていただける方がもしいましたら、このテンプレから自分でよしなにカスタマイズしちゃってください🐶!
そして使ってみて、
「こんなやり方よりもこんな方法がありますぜ...」とか
「こんな機能があったらよき〜〜」とか
なにか意見をお持ちの方、どんどん改善していきたいので大募集です!!お待ちしております。