Grunt × SCSS × Compass × StyleDocco（開発環境構築メモ）


# 2014/6/9 追記

http://qiita.com/youkaiantena/items/48790fdde8108bee04c4

scssファイルからStyleDoccoを生成するバージョンの記事を書きました。
Bundlerを使用して、CompassやSassをインストールしています。

本記事よりも有用性が高いと思いますので、宜しければご覧ください。

# 情報

## 環境

|name|version|
|:--|--:|
|Mac OS X|10.9.3|
|Ruby|2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin13.0]|
|Sass|3.3.8|
|Compass|0.12.6|
|StyleDocco|0.6.6|
|Node.js|0.10.28|
|npm|1.4.13|
|grunt|0.4.5|
|grunt-cli|0.1.13|
|grunt-contrib-compass|0.8.0|
|grunt-styledocco|0.1.4|
|grunt-este-watch|0.1.16|



## 参考にした情報

### URL

http://www.qript.co.jp/blog/technique/1601/
http://toybox-design.net/?p=640
http://mnemoniqs.com/web/styledocco/
http://tech.nitoyon.com/ja/blog/2013/10/10/grunt-watch-slow/

### 書籍

Sass & Compass 徹底入門（初版）

## 構造

develop
　|--grunt
　　|--grunt-test
　　　|--Gruntfile.js
　　　|--config.rb
　　　|--node_modules
　　　|--package.json
　　　|--scss
　　　|--assets
　　　　|--css
　　　　|--images
　　　　|--js
　　　|--docs
　　　　|--css
　　　　|--images
　　　　|--js
　　　　|--styleguide


# 開発環境構築手順

## "Node.js"のインストール

省略

## "npm"のインストール

省略

## "Sass"のインストール

```bash:terminal
$ sudo gem install sass
```

## "Compass"のインストール

### インストール

```bash:terminal
$ sudo gem install compass
```

### "Compassプロジェクト"の作成

```bash:terminal
$ mkdir -p ~/develop/grunt
$ cd ~/develop/grunt

# compassプロジェクトを作成します。
$ compass create grunt-test

# stylesheetsというディレクトリーが生成されますが、今回は不要なので削除します。
$ rm -R grunt-test/stylesheets

# sassというディレクトリーが生成されますが、今回はscssなのでリネームします。
$ mv grunt-test/sass grunt-test/scss
```

### "config.rb"の修正

```ruby:config.rb
http_path = "/"
# SCSS(Sass)ファイルの置き場所
sass_dir = "scss"
# コンパイルのCSSファイルの置き場所
css_dir = (environment == :production) ? "assets/css" : "docs/css"
# 画像ファイルの置き場所
images_dir = (environment == :production) ? "assets/images" : "docs/images"
# JavaScriptの置き場所
javascripts_dir = (environment == :production) ? "assets/js" : "docs/js"
# CSSの出力方法
output_style = (environment == :production) ? :compressed : :expanded
# 既存のファイルを上書きするか否か
force = true 
# コンパイル時に、SCSS内の行番号を出力するか否か
line_comments = (environment == :production) ? :false : :true
```

## "StyleDocco"のインストール

```bash:terminal
$ npm install -fg styledocco
```


## "Grunt"のインストール

### "grunt-cli"のインストール

[Grunt](http://gruntjs.com/)をコマンドラインから利用するために、`grunt-cli`パッケージをインストールします。

```bash:terminal
$ npm install grunt-cli -g
```

`-g` オプションは"グローバル"というオプションです。
グローバルオプションを指定する事により、作業ディレクトリー外のどんな場所でも`grunt`コマンドが使用可能になります。

### "Grunt"本体のインストール

Compassプロジェクトのディレクトリーに`Grunt`本体をインストールします。

```bash:terminal
$ cd ~/develop/grunt/grunt-test

$ npm init
# 色々と聞かれますが、基本はデフォルトでOKです。
# entry point: (index.js) のみ Gruntfile.js を指定しました。
# このコマンドで、package.jsonが生成されます。

$ npm install grunt --save-dev
```

`--save-dev` オプションは　作業ディレクトリーに配置される `package.json`　に依存性を記述するためのオプションです。
複数人で開発を行う場合、`package.json` を共有する事により、同様の開発環境を簡単に構築する事が出来ます。

### "Gruntプラグイン"のインストール

既に`Grunt`を便利に使うためのプラグインが複数用意されています。
プラグインは、[公式サイト](http://gruntjs.com/plugins)から探す事が可能です。


今回は、下記のプラグインを使用します。

+ [grunt-contrib-compass](https://www.npmjs.org/package/grunt-contrib-compass) - `Compass`のコンパイル
+ [grunt-styledocco](https://www.npmjs.org/package/grunt-styledocco) - `StyleDocco`によるCSSスタイルガイド作成
+ [grunt-este-watch](https://www.npmjs.org/package/grunt-este-watch) - ファイルの監視

まとめてインストールします。

```bash:terminal
$ npm install grunt-contrib-compass grunt-styledocco grunt-este-watch --save-dev
```

### "Gruntfile.js"の新規作成

まずはベースとなる`Gruntfile.js`を書きます。

```javascript:develop/grunt/grunt-test/Gruntfile.js
module.exports = function(grunt){
  grunt.initConfig({});
  grunt.registerTask('default', []);
};
```

上記をベースとし、`Gruntfile.js` に設定をしていきます。

## "Gruntfile.js"の設定

### プラグインの設定を追加

先ほど作成した`Gruntfile.js`を編集します。

```javascript:develop/grunt/grunt-test/Gruntfile.js
module.exports = function(grunt){
  grunt.initConfig({
    // grunt-contrib-compassの設定
    compass: {
      // 本番環境
      dist: {
        options: {
          config: 'config.rb',
          environment: 'production' // 環境の指定
        }
      },
      // 開発環境（必要な場合は記述）
      dev: {
        options: {
          config: 'config.rb',
          environment: 'development'
        }
      }
    },

    // grunt-styledoccoの設定
    styledocco: {
      dist: {
        options: {
          name: 'grunt-test',
          preprocessor: 'scss --compass'
        },
        files: {
          'docs/styleguide': 'scss'
        }
      }
    },

    // grunt-este-watchの設定
    esteWatch: {
      options: {
        dirs: ['scss'],
        livereload: false
      },
      scss: function(filepath){
        return ['compass', 'styledocco'];
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-styledocco');
  grunt.loadNpmTasks('grunt-este-watch');
  
  grunt.registerTask('default', ['compass', 'styledocco', 'esteWatch']);
};
```

## "Grunt"の実行

`grunt`コマンドを実行するだけです。

```bash:terminal
$ grunt
```

コマンドを実行すると、監視状態に入ります。
`develop/grunt/grunt-test/sass/**/*.scss`を編集すると、CSSとスタイルガイドが自動生成されます。