Git@OSCのススメ｜モバイルCSSスライス画像合成スプライト画像tool_html/css_WEB-ITnose

Gulp-CSS-GMSpriter

シンプルなモバイル CSS スライス図形合成ツール

ツールライブラリ:

Graphicsmagick ダウンロードアドレス: http://www.graphicsmagick.org/

TON ダウンロードアドレス: https://www.python.org/

オプションツールライブラリ

compass+ruby+sass

主に実装されている機能

1. プロトタイプ画像を処理するために、合成が必要な画像ディレクトリimages/icons /、images/slice/ ディレクトリに出力します

images/icons/ ディレクトリに 2x プロトタイプ画像を保存します

images/slice/ ディレクトリに 1x、2x 画像を生成します

2. 画像のスケーリングには gm ツールを使用します

3 .CSS コード スニペットの画像合成には gulp+gulp-css-spritersmith プラグインを使用します

4. 出力ディレクトリ public/

利点

1. 元の CSS ファイル コードを変更する必要はありません

2合成する必要がある画像のソース パスを設定できます (画像/アイコンなど)

3. さまざまな画面素材 (網膜など) に適応するようにメディア クエリ モバイル デバイスのクエリ コード スニペットを自動的に追加します

欠点

1ソーススライス画像の CSS コードを手動で入力する必要があります:

.m-icon-fail{    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;    width:100px;    height:100px;}.m-icon-success{    background: url(#{$icon_1_path}/m-suc.png) no-repeat;    width:28px;    height:28px;}

合成コード

.m-icon-fail { background: no-repeat;background-position: 0 0; width: 100px; height: 100px; }.m-icon-success { background: no-repeat;background-position: 0 -183px; width: 28px; height: 28px; }

Example zip をダウンロードした後、npm install を実行し、その後 gulp を実行します。コンパス環境がない場合は、コンパスを調整してください。それに応じてgulpfile.jsの設定を変更し、CSSモニタリングに変更します 🎜 🎜 🎜