Help us understand the problem. What is going on with this article?

CSS Sprites 生成ツール、Glue で使いそうなオプションのメモ

More than 5 years have passed since last update.

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 オプション。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away