CSS Sprites の自動生成ツール Glue を試してみたのでメモ。
ディレクトリ構成
DocumentRoot/
img/
sprites-images/
img1.png
...
img2.png
css/
実行コマンド
# 実行は DocumentRootで
glue img/sprites-images --url '/img' --css='css' --img='img'
オプション | 意味 |
---|---|
img/sprites-images | 素材画像が入っているディレクトリ |
--url '/img' | background-image:url(...) URLの先頭に付くパス |
--img='img' | 画像の出力先 |
--css='css' | css の出力先 |
実行結果
DocumentRoot/
img/
sprites-images/
img1.png
...
img2.png
sprites-images.png
css/
sprites-images.css
画像とcssのファイル名は、素材画像を格納したディレクトリ名が使われるよう。
コマンド実行のたびに、CSSが上書きされるのは嫌なので、LESS か何かでインポートさせるのが良さそう。
LESS で出力するのは --less
オプション。