※この記事は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?
(/・ω・)/おわりに
あくまでテンプレなので使っていただける方がもしいましたら、このテンプレから自分でよしなにカスタマイズしちゃってください?!
そして使ってみて、
「こんなやり方よりもこんな方法がありますぜ…」とか
「こんな機能があったらよき〜〜」とか
なにか意見をお持ちの方、どんどん改善していきたいので大募集です!!お待ちしております。