標準的なウェブページ作成用のボイラープレート最終版
まえがき
ウェブページを構成する要素や機能は複雑化の一途をたどっていますが、フロントエンド視点からすると最終的には HTML/CSS/JavaScript/画像ファイルが生成できれば良いわけです。
React.js や Vue.js などで SPA/SSR 作るよーとなると、素の環境で作るのはつらみがあるので専用の開発環境が必要になりますが、世のウェブサイトはそこまでオーバースペックな要件は不要な、キャンペーン用の LP とか、静的な構成メインのウェブサイトなどがあります。
こういうのを作るとき、毎回一から準備するのは面倒だし、また、素の HTML、CSS、VanillaJS を書くのはモダンな環境に慣れすぎた身にとってしんどいものです。
そんなで 自分の手間を省くための Boilerplate を gulp.js で作ったり、npm-scripts で CLI 頑張ってみたりしてみたのですが、最終的に Node.js を書くことになりました。
static-web-boilerplate
https://github.com/okamoai/static-website-boilerplate
構成
| ファイルタイプ | ジェネレータ | 採用理由 |
|---|---|---|
| HTML | Pug | テンプレートやコンポーネント単位でファイル分割して管理できる。閉じタグ不要ですっきり書ける |
| CSS | Stylus, PostCSS | コンポーネント単位でファイル分割して管理できる。ほぼ Sass と同じ書式で書ける上、高機能で実質 Sass の上位互換。node-gyp 不要なのもうれしい。 |
| JavaScript | Webpack, Babel | JS Bundler としては機能・パフォーマンス共に一番安定してる |
| Image | imagemin | オリジナルデータと圧縮データは分けてやっぱり管理したい |
| Web Font | postcss-webfont(forked) | Web Font 自体が CSS 主体の仕組みなので、独立したジェネレータではなく CSS の管轄としたかったので PostCSS プラグインで対応 |
| Sprite | postcss-lazysprite | Web Font 同様、CSS 主体の仕組みなので CSS の管轄としたかったので spritesmith ではなく PostCSS プラグインで対応 |
| その他ファイル | cpx | ジェネレータでなく、dist へファイルコピーするだけなので必要十分 |
特徴
Win/Mac 両方で使える
案外、世のボイラープレートは Mac 環境しか対応してないことが多いのです。
imagemin がディレクトリ階層を保持して圧縮ファイルを出力する
npm-scripts で直接 imagemin が実行できる imagemin-cli は実はディレクトリ階層を保持しないので、imagemin-cli が使えず、結局 node.js で階層処理書く必要があります。（gulp-imagemin はその辺上手くやってくれましたね）
CSS をビルドすると自動的に Web Font と CSS スプライト画像も生成する
従来の gulp.js の gulp-iconfont や gulp.spritesmith は CSS 生成とリソースファイル生成を行うため、Web Font や CSS Sprite のタスクを実行してからでないと CSS のビルドが正しく処理されません。つまり gulp のタスクに依存関係が発生していました。
このボイラープレートは PostCSS のプラグインで動作しているため、CSS をビルドすると自動的に Web Font と CSS スプライト画像も生成します。 Web Font や CSS Sprite の手法は元々 CSS 側のテクニックなので、管轄を CSS の中で完結させたかった意図があります。
Watch 時に Pug の extends/include や Stylus の import 対象を検知してビルドする
例えば Pug の extends 対象が複数あり、そのうち片方のファイルでしか include されていないファイルがあるとします。 Watch 時に そのファイルをを更新したとき、include や extends の対象となっているファイルのみがビルドされることを期待します。
関係ないページまでビルドすると当然処理が重たくなり、ローカルサーバへの反応が悪くなるからです。
できれば更新が必要なファイルだけビルド対象としたいところですが、このファイルの依存状態を判断してビルドするのに emitty を使って実現しています。
最後に
この手のベーシックな HTML/CSS/JavaScript/リソースファイルの構成のボイラープレートを今まで gulp.js, npm-scripts ベースでいろいろ作ってきましたが、行き着くとまで来た感があって、自分の中ではこれが最終系かなくらいに思ってます。
もし良かったら使ってみてください。Issue や Pull Request も歓迎してます！