【WebStormでSassを使おう】2：Gruntプラグインのインストールと設定

前回まででプロジェクトにGruntの基本パッケージをインストールしました。

下記コマンドでGrunt用プラグインをインストールします。
量が多いので多少時間がかかります。

npm install grunt-contrib --save-dev

ディレクトリ構成

読み込み先・出力先の設定を行うため、下記の構成を前提とします。

project
├img
├js
├css
├sass
├node_modules
└package.json

Gruntfile.jsの作成

プロジェクト直下に下記内容で「Gruntfile.js」を作ってください。

module.exports = function(grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        watch: {
            sass: {
                files: ['sass/*.scss'],
                tasks: ['compass']
            }
        }
    });
    var taskName;
    for(taskName in pkg.devDependencies) {
        if(taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }
    grunt.registerTask('default', ['watch']);
};

config.rbの作成

プロジェクト直下に下記内容でCompass用の「config.rb」を作成してください。

 http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
output_style = :compressed
relative_assets = true
line_comments = false

これで下準備がおよそできました。

次回に続きます。