1.x csssprite

Summary

Beezでは、スプライトシートの生成が可能です。

開発Webサーバ、ビルドでは、node-spritesheet を利用しpre-compileをおこないます。

関連ファイル

cssspriteに関わるのファイルは下記になります。これはBeezの仕様になります。

• sprite-[group]-[key].png: コンパイル前のファイル(SpriteSheetのパーツ)
• sprite-[group].styl: pre-compileしたスプライトシートを利用するためのstylファイル
• sprite-[group]@10x.png: pre-compileしたスプライトシートファイル(@x10のようにratioごと生成される)

機能

開発Webサーバにある sprite-[group]-[key].png ファイルは[group]でグループ化され、自動で sprite-[group].styl, sprite-[group]@10x.png として同一ディレクトリに自動コンパイルされます。

ビルド時に自動で sprite-[group]-[key].png ファイルは[group]でグループ化され sprite-[group].styl, sprite-[group]@10x.png として同一ディレクトリに自動コンパイルされます。

How to use

config

設定ファイルでどの画像をどのような命令規則でスプライトシート化するかを設定することが出来ます。

example

{
    "sprite": {
        "options": {
            "ratios": [ 1, 1.3, 1.5, 2 ], // 生成するsprite sheetのratio
            "extnames": [ ".png", ".jpg" ], // sprite sheetのpartsとなる画像の対象拡張子
            "heads": [ "sprite", "_sprite" ], // sprite sheetのpartsとなる画像のファイル名の先頭
            "separator": "-", // ファイル名のheadやratioの接続文字
            "overwrite": false //　sprite sheetを上書きするか否か,
            "logpath": '/project/temp', //  spriteの更新情報を保存します
            "logname": '.sprite' //   spriteの更新情報を保存するログ
        }
    }
}

以下sprite-[group]-[key].pngのspriteを先頭詞、-を接続詞、[group]をグループ名、[key]をパーツ名と呼ぶ

• ratios ここで指定したratio分のスプライトシートを生成する。上記のような設定の場合、 sprite-[group]@10x.png, sprite-[group]@13x.png, sprite-[group]@15x.png, sprite-[group]@20x.pngのように生成されます。
• extnames スプライトシートのパーツとなる画像の対象拡張子です。
• heads スプライトシートのパーツとなる画像のファイル名の先頭詞です。グループ名が同じでも先頭詞が違う場合は違うスプライトシートとしてみなされます。sprite-apple-red.png, sprite-apple-blue.jpg, _sprite-apple-green.png, _sprite-apple-yellow.jpgが同一ディレクトリにあった時、sprite-apple.styl, _sprite-apple.stylが生成され、前者にはredとblue、後者にはgreenとyellowが入ります。
• separator 先頭詞、グループ名、パーツ名を繋ぐ接続詞です。
• overwrite スプライトシートを上書きするか否かを設定することが出来ます。 trueの場合スプライトシートを新たに生成し上書きします。 falseの場合スプライトシートの元となる画像が更新されていない場合処理をスキップします。
• logpath スプライトの更新情報を保存するディレクトリを指定します。指定しなかった場合更新情報はユーザーのtmpdirに保存されます。
• logname スプライトの更新情報を保存するファイルの名前を指定します。指定しなかった場合.spriteという名前で保存されます。