バックエンド側の対応をしない、もしくは納品後に対応してもらうなどの
静的な感じのサイトをつくる人（僕とか）の為の Gulp 環境です。
そもそも Gulp が基本的にはフロントエンドの為のものですので、バックエンド側の対応を考えないというか、
例えば SPA とかじゃなくて、普通のサイトを作るって事に特化した環境と考えてもらえれば良いかと思います。
GitHub
https://github.com/syuji-higa/scaffold-frontend-gulp
実験の場でもあるので、余計なファイルとかも入っています。
ざっくりな説明と気にかけた箇所
task
作業用途に応じて用意。
- プロダクション用のタスクを用意
local server
BrowserSync を使用。
- PHP を動かす必要もあったりするので、それようのローカルサーバー（gulp-connect-php）も用意。
また、それぞれのタスクと組み合わせられるようにオプションとして起動。
watch
ファイル更新時にコンパイル＆ライブリロード。
- pug のテンプレートやインクルードファイルを更新時に、不要なライブリロードを行わない。
参考：http://qiita.com/syuji-higa@github/items/23df9dec7cbe8e371c2a
HTML
pug をコンパイル。
- pug ファイル中で使える変数を用意。
-
filters に記述をそのまま出力できるものを用意。
PHP などを記述する場合に便利。 - プラグインを通す際に、必要なファイルだけ通すようにフィルターを用意。
特定のファイルだけ拡張子を PHP に変換する際などに便利。 - よく使うプラグインはコメントアウトで用意。
- テンプレートファイルと json データからコンパイルできる Factory を用意。
似たような HTML の大量生成に便利。
CSS
Image
スプライト画像生成と画像圧縮。
- 画像の圧縮は時間がかかるので、画像圧縮タスクとプロダクションタスク時の初回にだけ行う。
JavaScript
基本は Babel（es2015、stage-0） をトランスパイル。
webpack で結合。
パッケージマネージャーに Bower を使用。
- package.json で指定されている main 以外のファイルを使用する場合の alias を用意。
納品の問題で丸ごと圧縮出来ず、min ファイルを使用したい場合などに便利。 - ユニットテストを用意。（とりあえず用意したけど使っていない）
URL list
別ポートで html ファイル一覧を表示。
- サーバーにアップする用のファイルも出力可能。
わざわざ用意した理由
- サーバーの設定でファイル一覧表示はできるが、index.html とか入れる必要があるのでなんか嫌だ。
- VirtualBox やスマホとかでアクセスするのが面倒なときがある。
Clean
不要ファイルの削除。
プロダクションタスク時に合わせて実行される。
今後の課題など
-
ログの出方や順番がイマイチ解決した - 初回起動に時間がかかる
- pug のテンプレートやインクルードファイルを更新時に必要なファイルだけ更新させたい
- Bower vs npm について考える
- gulp のグローバルインストールを辞めるべきかどうか
所感
まあ、やり過ぎな感じもしますが、それなりに便利に使えてるので良いかなって思ってます。
styleguide とかも入れてましたけど、使う機会がないようなので削除しました。
必要になればその時だけ入れれば良いかなと。
因みにこの環境は会社でほぼ同じものを使ってます。
僕自身は基本 JS だけ組み込んでて、マークアップとかは他の方が対応しているので、
みんなに使ってもらって修正・改修を重ねてる感じですね。
もっとスマートに且つ便利な環境に出来ればと思ってますので、またイロイロと考えてみます。