実はだいぶ前に作ったあったものの、いろんなことにかまけてるうちにまとめる気力が減って途中で止まっていましたが、ちょうどまとまった時間ができたので乗り掛かった舟、勢いでまとめて公開しておきます。
https://github.com/okamoai/gulp-boilerplate
フロントエンド界隈だと gulp 自体が若干レガシー化して来た感あるんですが、まだまだ案件でも使えると思うのでもし良かったら触ってやってみてください。
最近はタスクランナー使わずに npm scripts でやった方がよさげですが、実はそっちの Boilerplate も作ってあったりします。これもそのうちリポジトリに上げる予定です。
Feature
- 静的サイトの出力に適しています。
- 極力 gulp タスクのコードそのものは修正せず、
gulp/config.jsファイルとsrc/以下の開発ファイルのみで既存案件の様々な構成に対応できるようになっています。 - 出力環境によって変わる CDNリソースやドメイン、ドキュメントルートパスなどを
development,staging,production別に定義できます。 - 開発ファイルは以下の形式に対応しています。複数形式のあるものはどちらかを
gulp/config.jsで選択できます。今後、gulp タスクを増やすだけで対応形式を追加できる構成になっています。- HTML: Pug or EJS
- CSS: Sass or PostCSS
- JavaScript: Babel(ES6) or ES5+ファイル連結 (gulp-concat)
- Webフォント: SVG から フォント/CSSファイルを生成 (gulp-iconfont)
- CSSスプライト: PNG から スプライト画像/CSSファイルを生成 (gulp.spritesmith)
- 以前に TIPS で書いた以下の内容はタスクの機能として取り込んであります。
- 詳しい使い方はリポジトリの READMEを見て、実際にビルドしてみるのが早いです。
GitHub
https://github.com/okamoai/gulp-boilerplate
ToDo
今後想定される作業は以下のような感じです。