WebStormでGruntを使うファストガイド

前提

下記のフォルダ構成を前提とします。

project
├img
├js
├css
└sass

 手順

1. node.jsのインストール
   http://nodejs.org/
2. コマンドプロンプトで下記コマンド実行　（Grunt基本パッケージのインストール）
   

   npm install -g grunt-cli

3. WebStormを起動し、プロジェクトフォルダを開く
4. 画面下の「Terminal」を開き、下記コマンドを打つ

   npm init

5. ターミナルからの対話を下記のように進める
   

   name: {プロジェクト名}
   version: (Enterで飛ばす)
   description: (Enterで飛ばす)
   entry point: Gruntfile.js
   test command: (Enterで飛ばす)
   git repository: (Enterで飛ばす)
   keywords: (Enterで飛ばす)
   author: (Enterで飛ばす)
   license: (Enterで飛ばす)
   Is this ok? (EnterでOK)

6. ターミナルで下記コマンドを打つ　（GruntモジュールのDL）
   

   npm install grunt --save-dev

7. ターミナルで下記コマンドを打つ　（GruntプラグインのDL）
   

   npm install grunt-contrib --save-dev

8. プラグインパッケージのインストールはやや長いので待つ
9. プロジェクトフォルダに下記内容でGruntfile.jsを作成
   

   module.exports = function(grunt) {
       var pkg = grunt.file.readJSON('package.json');
       grunt.initConfig({
           compass: {
               dist: {
                   options: {
                       config: 'config.rb'
                   }
               }
           },
           cssmin: {
               compress: {
                   files: {
                       './css/*-min.css':['css/*.css']
                   }
               }
           },
           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']);
   };

10. プロジェクトフォルダに下記内容で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

11. WebStorm画面下の「Grunt」を開く
12. 「Gruntfile.js」下の「default」の実行で自動処理の監視が始まる