Grunt+CompassでCSS Spriteが勝手に生成される環境を作る

こんな人向け

Sass/ScssやCompassは使える！
Gruntは最近始めたばっか
CSS Spriteをめっちゃ簡単に作りたい

CSS Spriteを作るプラグインもGruntにはあるのですが、
スクリプトを組むよりもCompass側で処理しちゃった方が（個人的に）楽だったり。

手順

１：GruntとCompassをインストール

GruntとCompassのインストール方法などについては、以下の記事などを見て頂けると幸いです。

Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – ＠IT
CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG

２：必要なフォルダとファイルを用意する

Grunt・Compassともに監視先とファイルの保存先が必要です。

先ほどの記事やconfig.rbなどを見ながら必要なフォルダを用意しましょう。

３：scssファイルを作成する

今回使ったCompass(scss）ファイルのコードです。

[css]
@import "compass";
@import "compass/utilities/sprites";

$csssprite-layout:diagonal;

@import "csssprite/*.png";
@include all-csssprite-sprites;

[/css]

「csssprite」というフォルダ内の画像をスプライト化させます。

４：gruntfile.jsを編集する

そしてGruntの設定ファイルを編集し、先ほどのscssファイルを自動で起動させるようにします。

[html]
module.exports = function(grunt) {
//Auto Load Plugin
var pkg = grunt.file.readJSON(‘package.json’);

grunt.initConfig({
// Compass
compass: {
dist: {
options: {
config: ‘config.rb’
}
}
},

// Watch
watch: {
files: ‘★CSS Spriteのフォルダパス★/*.png’,
tasks: [‘compass’]
},

});

//Load NPM
grunt.loadNpmTasks(‘grunt-contrib’);

//Register Tasks
grunt.registerTask(‘default’, [‘compass’, ‘watch’]);
};
[/html]

「compass」にCompassの動作設定を記述。

「watch」で先ほどの画像フォルダの更新を監視するように記述しました。

５：Grunt watchを起動する

コマンドラインで以下のコードを打ち、Grunt watchを起動させます。

[html]
grunt watch
[/html]

６：スプライト画像をフォルダに入れる

png画像を追加・編集・削除する度にGruntが自動的にCSS Spriteを生成してくれます。

まとめ

非常にざっくりでしたがいかがでしたでしょうか。

厳密には、
一：Grunt watchがpngファイルの変更を感知
ニ：Grunt compassによってCompassが起動
三：Compassがscssファイルをコンパイル
四：scssファイルの記述に基づいてCSS Spriteを生成

という流れです。

Gruntに慣れている方からすると「なんと面倒なことを・・・」と思われるかもしれませんが、

Compassの方が使い慣れている身としては、まずはこの方法でGrunt操作に慣れていこうと思う次第です。

Gruntで完結されば良いものを、Compass経由にしているのでもちろん処理速度はこの有り様です。

おっそーい！

たまに動作しない時が出てきているので、正攻法でGruntからSpriteを生成させたほうが良さそうです。

そちらについてはまた近いうちに・・・