AipoのCSSコーディング環境（Grunt/Sass/Compass)のおさらい

Grunt/Sass/Compassとは何なのか、どのように設定され動いているのかを社内向けにおさらいの意味で記します。

Gruntとは

node.jsで動くタスクランナー（監視自動実行プログラム）

できること

Sass/CompassのほかHAMLやCoffeescriptなどのメタ言語のファイル監視＆コンパイルの自動実行
HTML/CSS/JSなどのミニファイ
ブラウザ自動リフレッシュ
スプライト画像の生成
etc多数。プラグインによる。

組み込んだプラグインに応じてWebフロント制作の様々な作業を自動実行してくれる。

package.json

node.jsの環境保存ファイル。
これ自体はGruntのためのものというより、node.jsのためのもの。

モジュールやプラグインの情報を記録しておき、「npm install」のみでその環境を再現するためのもの。

社内ではGruntでSass/Compassを使えるようにするため、この中にそのパッケージ情報を記録している。

Gruntfile.js

Gruntで扱う設定ファイル。拡張子通りJSで書かれている。
基本的にプロジェクトごとに1個以上必要。

ファイル名は Gruntfile.js で固定する必要はなく、Gruntが一定フォーマットで認識すれば動く。
そのため複数の設定の異なるGruntfile.jsを複数同時に走らせることもできる。

大まかには下記のフォーマットになる。

module.exports = function (grunt) {
    // package.jsonを読み込む。お約束。
    var pkg = grunt.file.readJSON('package.json'); 

    // Gruntで実行するタスク郡。この場合「compass」と「watch」のタスクがある。
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        }
        watch: {
            files: ['sass/*.scss'],
            tasks: ['compass']
        }
    });

    //読み込むプラグイン郡。複数指定可能。
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //このコメントアウト箇所はnode_modules内にあるプラグイン全てを読み込む処理。
    //var taskName;
    //for (taskName in pkg.devDependencies) {
    //  if (taskName.substring(0, 6) == 'grunt-') {
    //      grunt.loadNpmTasks(taskName);
    //  }
    //}

    //Grunt実行時にデフォルトで実行するタスクの指定。この場合「watch」を実行する
    grunt.registerTask('default', ['watch']);
};

タスクに「compass」と「watch」がある。
タスク「compass」は「config.rb」の設定を読み込む（config.rbに基づき動作する）
タスク「watch」は「files」に指定されたファイルに変化があるとタスク「compass」を実行する
このGruntfileを実行時に「watch」のみ実行する

この設定のため、Gruntを実行することで「watch」タスクがsassフォルダの.scssファイルを監視し始め、.scssファイルに変化があればcompassタスクが実行される仕組みになっている。

Sassとは

CSSの編集補助を行うメタ言語。

クラスをネスト構造できたり短縮記述や変数が扱えるのでCSSコーディング効率化に効果的。
特定のフォーマットでCSSを出力できるので属人的なクセを排除したソースフォーマット統一にも効果的。

CSSそのままで記述しても何ら問題なく、＋αのSass記法が加わるだけなので学習コストが低い。

外部ツールでも利用できるがGruntで動かすことを推奨。

Compassとは

さらに強化されたSassと考えてOK。
標準mixinが大量にあるので自分でmixinを作る必要がだいぶ無くなる。

Sassと異なりRubyで動くので別途Rubyのインストールなどが必要。

scssファイルの読み込みパス、cssファイルの出力パスなどの設定は config.rb の内容に依存する。

config.rb

Compassの設定を行っているファイル。
CompassはRubyで動いているのでこのファイルもRuby形式で書かれているが、内容はごく簡単。

//各種ディレクトリ設定
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

//出力CSSの圧縮設定。expanded:標準出力 / nexted:ネスト出力 / compact:コンパクト出力 / compressed:圧縮出力
output_style = :expanded
//パス指定を相対パスにするか
relative_assets = true
//出力後CSSにコメントを残すか
line_comments = false

最近は「Gulp.js」というGruntに代わりうるタスクランナーがキてるようで、そちらの乗り換えも考えてます。