Gruntの基礎おさらい

WebStormをベースに、Gruntを用いてSassを利用していますが、どのようにしてSassまで行き着いているのか改めて仕組みをおさらいします。

GruntでSassを動かすために、プロジェクトフォルダごとに下記3点のファイルが必要になります。

• package.json
• Gruntfile.js
• config.rb

package.json

Gruntを動かすにはプロジェクトごとにプラグインファイルをインストールする必要があり、そのパッケージ情報がまとめられた設定ファイル。

WebStormでプロジェクトを開き、ターミナルから npm install を実行するとこれが参照され、node_moduleフォルダに一式インストールされる。

Gruntとは

Gruntとはnode.jsで動作するタスクランナー（作業自動化ツール）

Gruntfile.js の設定をもとに動作する。
内容はおおまかに下記で構成されている。

• Gruntで行うタスクの設定
• タスクを処理するために必要なプラグインの設定
• デフォルト動作の設定

module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');

    //タスクの設定
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        watch: {
            files: ['themes/default/sass/*.scss'],
            tasks: ['compass']
        }
    });

    //プラグインの設定
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    //デフォルト動作の設定
    grunt.registerTask('default', ['watch']);
};

Compassとは

Rubyで動作する、Sassを強化してくれるmixin郡のようなもの。
Compassの動作でSassをまかなえるので、GruntではCompassのみを動かす指定のみで済む。

config.rb の設定をもとに動作する。

http_path = "/"         //プロジェクトフォルダから見たルートパスの指定
css_dir = "css"         //CSS出力するフォルダの指定
sass_dir = "sass"       //読み込むscss用フォルダの指定
images_dir = "images"       //画像フォルダの指定
javascripts_dir = "js"      //JSフォルダの指定
output_style = :expanded    //CSS出力時の圧縮指定。expanded, nexted, compact, compressed の4つから選ぶ
relative_assets = true      //パス出力の相対(true)絶対(falese)の指定
line_comments = false       //CSSへのコメント出力。scss側の何行目と出てくるのでデバッグしやすくなる

WebStormでの実行

Gruntfile.jsを右クリックしOpen Grunt ConsoleからGruntコンソールが開きます。

左下にGruntfile.jsに書かれているタスクの一覧が出ますが、基本はdefaultをWクリックして開始します。
上記の内容であればSassを監視するための「watch」が動作し、scssファイルが編集されたらCSSが出力されるという仕組みが動きます。

Gruntfile.jsにタスクを加えればGruntコンソールに反映され、デフォルト以外のタスクもそこから単発で実行させることができます。