今更だけど gulp の Boilerplate 作った
実はだいぶ前に作ったあったものの、いろんなことにかまけてるうちにまとめる気力が減って途中で止まっていたのです。
ちょうどまとまった時間ができたので、乗り掛かった舟、勢いでまとめて公開しておきます。
https://github.com/okamoai/gulp-boilerplate
フロントエンド界隈だと gulp 自体が若干レガシー化して来た感あるんですが、まだまだ案件でも使えると思うのでもし良かったら触ってやってみてください。
最近はタスクランナー使わずに npm scripts でやった方がよさげですが、実はそっちの Boilerplate も作ってあったりします。これもそのうちリポジトリに上げる予定です。
【追記】2019/6/25: 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
今後想定される作業は以下のような感じです。