Gruntことはじめ

# インストール
- node.jsを使用したタスク自動化ツール
- タスクをスクリプト化して自動化できる
- 前提として、nodeとnpmをインストールしていること

インストールコマンド(グローバルにインストール)

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

# package.json作成
以下を実行すると色きかれるけど、とりあえず全てEnterして、package.jsonを作成

```bash:
$ npm init
```
package.jsonができている

```bash:
$ ls
> package.json
```

```json:package.json
{
  "name": "mysite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

```

# grunt本体のインストール
以下のコマンドでgrunt本体をインストール
("--save-dev"はpackage.jsonになにかしてくれるおまじない)

```bash:
$ npm install grunt --save-dev
```
node_mosulesディレクトリができて、その中にgruntが入る

```bash:
$ ls
> node_modules	package.json
```

"--save-dev"を追加することで、package.jsonの中に以下の記述ができて、これによりpackage.jsonから構成を再構築することができる

```json:package.json
...
"devDependencies": {
    "grunt": "^0.4.5"
}
...
```

# Gruntfile.jsの作成
gruntのプラグインはここから検索できる
http://gruntjs.com/plugins

Gruntfile.jsファイルを作成する

```javascript:Gruntfile.js
module.exports = function(grunt) {	
}
```

## contrib-lessのインストール
- 今回はlessのプラグインを使ってみる
- contrib-lessはLESSをGrunt上で使えるようにしたプラグイン

less参考
http://qiita.com/kwst/items/f8d6c1ba0a2f5f592771

リポジトリURL
https://github.com/gruntjs/grunt-contrib-less

インストール
"--save-dev"がついているのでpackage.jsonに追記される

```bash:
$ npm install grunt-contrib-less --save-dev
```

## lessファイルをcssに変換する
- lessファイルsrc/styles.lessを事前に用意
- 実際にタスクをGruntfile.jsに記述していく

```javascript:Gruntfile.js
module.exports = function(grunt) {
	// config
	grunt.initConfig({
		less : {
			build : {
				src : 'src/styles.less',
				dest : 'build/styles.css'
			}
		}
	});
	// plugin
	grunt.loadNpmTasks('grunt-contrib-less');

	// task
	grunt.registerTask('default', 'less'); // 'default'オプションで実行した時に、'less'というコマンドが実行される
};
```
実行

```bash:
$ grunt default
```
実行後、build/styles.cssができている

## cssをminifyした形で出力する
optionsを追加することで色々な設定ができる

```javascript:Gruntfils.js
	grunt.initConfig({
		options : {
			compress : true // 圧縮する設定
		},
		less : {
			build : {
				src : 'src/styles.less',
				dest : 'build/styles.css'
			}
		}
	});
```


## タスクの書き方
```javascript:
task : { // pluginの名前になる
	target1 : { // 名前は自由
		src : ...,
		dest : ...
	},
	target2 : { 
		files : {
			'des' : 'src'
		}
	},
}
```
filesの指定方法は公式ドキュメントに色々載っている
http://gruntjs.com/configuring-tasks#files

# contrib-csslist
- cssの文法などの妥当性をチェックできるツール

リポジトリ
https://github.com/gruntjs/grunt-contrib-csslint

インストール

```bash:
$ npm install grunt-contrib-csslint --save-dev
```

```javascript:Gruntfile.js
...
	grunt.initConfig({
		less : {
			build : {
				src : 'src/styles.less',
				dest : 'build/styles.css'
			}
		},
		csslint : {
			check : {
				src : '<%= less.build.dest %>'
			}
		}
	});

...

grunt.registerTask('default', ['less', 'csslint']);
```

# contrib-watch
- ファイルを監視して、変更が加えられた時に自動でタスクを走らせるプラグイン
インストール

```bash:
$ npm install grunt-contrib-watch --save-dev
```

```javascript:Gruntfile.js
...
	grunt.initConfig({
		...
		watch : {
			watch_css : {
				files : 'src/*.less',
				tasks : ['less', 'csslint', 'cssmin']
			}		}
		...
	});

...

grunt.registerTask('default', ['less', 'csslint', 'cssmin', 'watch:watch_css']);
```

# contrib-connect
- Gruntから起動する簡易サーバー
- 簡単にサイトをチェックしながらコーディングすることができる

インストール

```bash:
$ npm install grunt-contrib-connect --save-dev
```

```javascript:Gruntfile.js
...
		connect : {
			server : {
				options : {
					port : 8888,
					hostname : '〇〇.〇〇.〇〇.〇〇'
				}
			}
		}
...
grunt.registerTask('default', ['less', 'csslint', 'cssmin', 'connect', 'watch:watch_css']);
```

起動すると以下の表示があるので、urlにアクセス可能になる

```bash:
> Running "connect:server" (connect) task
> Started connect web server on http://〇〇.〇〇.〇〇.〇〇:8888
```