いろいろおかしかったり、すっきりしないところがあるけど、
自分用にテンプレートファイルを作ってみた。

あまり大したことはやってなくて、だいたいのタスクはこんなかんじ。
（個人的には、Livereload + compassさえあれば満足。）

● grunt　(通常コマンド)
・Compassのコンパイル
・JPEG、GIF画像の圧縮
・PNG画像の圧縮
・webサーバーを起動(http://localhost:8000/)
・ファイルの更新監視(Livereload)

● grunt r (納品用的な)
・JSファイルの結合
・JSファイルの縮小化
・CSSの縮小化

● grunt g (スタイルガイド編集用)
・スタイルガイドの作成(KSS)

ディレクトリ

 [projectName]    ...< プロジェクトのルート >
   ├ [develop]    ...< 開発用ディレクトリ >
       ├ [_scss]  ...sassファイル
       ├ [css]
       ├ [js]
       ├ [img]
       ├ [_dist]  ...圧縮済画像
           ├ [img]
       ├ index.html
   ├ [release]    ...< 納品用ディレクトリ >
       ├ [css]    ...圧縮済CSS
       ├ [js]     ...圧縮済JS
   ├ [styleguide]  ...< スタイルガイド用ディレクトリ >
   ├ [node_modules]...Gruntのプラグイン
   ├ package.json  ...Gruntで使用するプラグイン等を記述
   ├ config.rb     ...Compassの設定ファイル
   ├ Gruntfile.js  ...Gruntの設定ファイル

もうちょっといい感じのフォルダ名にしたり、
すっきりさせたい...
圧縮済みの画像はデザイナーさんによって、お許しが出ないことがありそうなので、
別フォルダで管理。

package.json

{
  "name": "grunt-template",
  "version": "0.1.0",
  "description": "",
  "author": "",
  "license": "",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-watch": "*",
    "grunt-contrib-imagemin": "~0.7.1",
    "grunt-pngmin": "~0.6.1",
    "grunt-contrib-concat": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-connect": "*",
    "grunt-contrib-compass": "~0.9.1",
    "grunt-contrib-copy": "*",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-kss": "~0.4.0"
  }
}

今後もう少し増やす予定...

Gruntfile.js

module.exports = function(grunt){

  // 読み込むプラグインの設定
  var taskName;
  var pkg = grunt.file.readJSON('package.json');
  for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }

  // 各タスクの設定
  grunt.initConfig({

    // package.jsonの定義
    pkg: pkg,

    // compass
    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },

    // 画像パス
    paths: {
      img: 'develop/img/',
      imgdist: 'develop/_dist/img/'
    },

    // jpg.gif圧縮
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: '<%= paths.img %>',
          src: '**/*.{jpg,gif}',
          dest: '<%= paths.imgdist %>'
        }]
      }
    },

    // png圧縮
    pngmin: {
      compile: {
        options: {
          ext: '.png'
        },
        files: [{
          expand: true,
          cwd: '<%= paths.img %>',
          src: '**/*.png',
          dest: '<%= paths.imgdist %>'
        }]
      }
    },

    // jsファイルの結合
    concat: {
      dist: {
        src: 'develop/js/libs/*.js',
        dest: 'release/js/scripts.js'
      }
    },

    // jsファイルの圧縮
    uglify: {
      build: {
        src: 'develop/js/scripts.js',
        dest: 'release/js/scripts.min.js'
      }
    },

    // cssの圧縮
    cssmin: {
      dev: {
        src: 'develop/css/style.css',
        dest : 'release/css/style.min.css'
       }
    },

    // ファイルのコピー
    copy: {
      css: {
        expand: true,
        cwd: 'develop/',
        src: ['css/style.min.css'],
        dest: 'release/'
      },
      js: {
        expand: true,
        cwd: 'develop/',
        src: ['js/scripts.min.js'],
        dest: 'release/'
      }
    },

    // ファイルの削除
    clean: {
      release: {
          src: 'release'
      }
    },

    // スタイルガイド
    kss: {
      options: {
        template: 'styleguide/temp/',  //テンプレート用のフォルダを指定
        includeType: 'scss',
        includePath: 'styleguide/css/style.scss'
      },
      dist: {
        files: {
          'styleguide/': ['styleguide/scss/']
        }
      }
    },

    // ローカルホスト
    connect: {
        server: {
            options: {
                port: 8000,
                hostname: 'localhost'
            }
        }
    },

    // watch
    watch : {
        options: {
            livereload: true
        },
        html: {
            files: ['**/*.html']
        },
        img : {
            files: ['**/*.{png,jpg,gif}'],
            tasks: ['imagemin', 'pngmin']
        },
        sass: {
            files: ['**/*.scss'],
            tasks: ['compass']
        },
        kss: {
            files: ['styleguide/css/*.scss'],
            tasks: ['kss']
        }
    }

  });

  // gruntコマンドで実行するタスクの設定
  grunt.registerTask('default', ['connect','watch']);
  grunt.registerTask('r', ['clean:release', 'copy', 'concat', 'uglify', 'cssmin']);
  grunt.registerTask('g', ['kss','connect','watch:kss']);
};

ファイル構造をもう少しすっきりさせたい...
ディレクトリは変数でまとめた方がいいかも。

config.rb （Compass用）

config.rb

#ディレクトリ名の設定
http_path = "develop/"
css_dir = "develop/css"
sass_dir = "develop/_scss"
images_dir = "develop/img"
javascripts_dir = "develop/js"

#コメント削除
line_comments = false

#URL指定を相対パスに変更
relative_assets = true

# スプライト画像をユニークな名前じゃないやつで複製
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

#　スプライト画像のCSSパスをユニークな名前じゃないやつに書き換え
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

Compassのディレクトリの設定はなんとなくこっちに記述

なんだかもやもやしてるところがいろいろあるけど、
随時更新していけたらなと思う。

Gruntのテンプレートファイルを作ってみた。

ディレクトリ

package.json

Gruntfile.js

config.rb （Compass用）