ccn-sprite v0.0.0

@cocone/ccn-sprite

Description

webpack-spritesmithを使ったスプライト画像の生成スクリプトです。

Usage

"scripts": {
    "sprite": "@cocone/ccn-sprite"
}

オプションを指定する場合

"scripts": {
    "sprite": "node <pathToScript>/sprite/index.js --sourceRoot '<sourceRoot>' --destImageDir '<destImageDir>' --destCssDir '<destCssDir>' --cssImageDirRef '<cssImageDirRef>'"
}

実行するとsourceRootで指定したディレクトリ配下のディレクトリが一覧されるので、 スプライトのソース画像を格納したディレクトリを選択します。

? choose target directory › - Use arrow-keys. Return to submit.
❯  src/sprite/ui
   src/sprite/ui/help
   src/sprite/ui/index

続いて画像圧縮の使用を尋ねられるのでY/nで回答してください。(default: Y) Yを選択するとスプライト画像の生成後、imageminを使用して圧縮処理が実行されます。

? use imagemin? › (Y/n)

スプライト作成処理が完了すると選択したディレクトリパスをファイル名とした以下のファイルが作成されます。
('./src/sprite/ui/index/btn'を選択した場合)

• destImageDir/ui_index_sp.png
• destCssDir/_ui_index.scss
• destCssDir/_mixin.scss

出力されるscssのサンプル

(※scssの変数ルールで先頭に数字は使えないのでディレクトリ名にも先頭が数字にならないようにしてください。)

$uiIndexBtnClose: (612px, 0px, -612px, 0px, 280px, 168px, 892px, 615px, "../img/sprite/ui_index_sp.png", "uiIndexBtnClose");
$uiIndexTitleBlonds: (0px, 0px, 0px, 0px, 604px, 170px, 892px, 615px, "../img/sprite/ui_index_sp.png", "uiIndexTitleBlonds");
$uiIndexTitleGold: (0px, 178px, 0px, -178px, 604px, 170px, 892px, 615px, "../img/sprite/ui_index_sp.png", "uiIndexTitleGold");
$uiIndexTitleSilver: (0px, 356px, 0px, -356px, 604px, 170px, 892px, 615px, "../img/sprite/ui_index_sp.png", "uiIndexTitleSilver");

Install

npmを使ってインストールします。

npm i @cocone/ccn-sprite -D

Requirement

本スクリプトは以下のようなディレクトリ構造のプロジェクトでの利用を想定しています。 下記の構造通りのプロジェクトであればスクリプトのオプションの指定は不要です。

.
├── package.json
└── src
    ├── img
    │   └── sprite // 生成されたスプライト画像の格納ディレクトリ
    │       ├── ui_help_sp.png
    │       └── ui_index_sp.png
    ├── js
    ├── scss
    │   └── sprite // 生成されたscssファイルの格納ディレクトリ
    │       ├── _mixin.scss
    │       ├── _ui_help.scss
    │       └── _ui_index.scss
    └── sprite // スプライトの元画像の格納ディレクトリ
        └── ui
            ├── help
            │   ├── btn_close.png
            │   ├── btn_gacha.png
            │   └── btn_reload.png
            └── index
                ├── btn_close.png
                ├── title_blonds.png
                ├── title_gold.png
                └── title_silver.png

Options

スクリプト実行時のオプションでファイルの出力ディレクトリを設定することができます。