動的な一覧化を利用したファイルのビルド

少し前からCSSやJavaScriptファイル、ファビコンやタッチ・アイコンをビルドする時に入出力ファイルの対応を動的に生成していた。ファイル名を使って、ビルドするものかどうかの判断やまとめる先のファイル名を判断させる。そこそこ規模が大きくなると便利そうだが、数種類をビルドするだけには無駄なシステムだ。普通に対応関係を書くように戻した。

ファイル名での制御はプリフィックスや二重拡張子を利用して行っていた。

src/css/_bar.css
src/css/foo.css
src/img/favicon.svg
src/img/touch-icon-precomposed.svg
src/js/script1.foo.js
src/js/script2.foo.js
src/js/script3.bar.js

これらをビルド・ツールに通すと、以下のようなファイル群ができあがる。

dist/apple-touch-icon-precomposed.ico
dist/css/foo.min.css
dist/favicon.ico
dist/js/bar.min.js
dist/js/foo.min.js

CSSファイルのビルドでは_で始まるファイルを無視(@importで読むファイルということになる)していた。またJavaScriptファイルのビルドでは二重拡張子でまとめるビルド先のファイル名を指定しておくわけだ。ファビコン等は出力先のパスが固定なので、中間ファイルをうまく使うようにするだけで良い。


古い(Front Matterが発明されていない時代)フラットファイルなCMSだとこういうアプローチがよくあった。ポータブルかつ敷居が低い反面、制限も多かった。小規模なウェブサイトなら一考の余地はあるかもしれないと考えてやってみていたが、規模に合わない柔軟さが不釣り合いだった。中規模以上ならばwebpackなどになるので、もう存在価値はないようだ。