僕がGrunt.jsで使っているPlugin一覧

# どんなニーズに基いているか

デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。
デザイナーだけどフロントエンドに興味ある人向け。

**2015-02-07: gulp編を作成**

gruntからgulpへ移行したので、gulp版の一覧も作成しました。
[僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita](http://qiita.com/y_hokkey/items/44487d7948f8a0c6b633)

# プラグイン一覧：非Contrib系

## grunt-aws-s3

S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。

* 同名ファイルは確認なしで上書き可能
* デフォルトでpublic-readになるので、Web関係には便利

配布元
https://github.com/MathieuLoutre/grunt-aws-s3

## grunt-bless

IE9のセレクタ数限界を解消する「bless」を実行できる。
昔はまったので保険のために入れている。ちゃんとSMACSSとか考えればおそらく不要。

参考：IE 9以下に存在するセレクター数制限にはまった
http://less.carbonfairy.org/post/18072493708

## grunt-browser-sync

静的なHTMLで制作しているものであれば、livereloadよりこちらをよく使う。

* スクロール位置や画面遷移を、複数のブラウザを通してリアルタイムに同期
* HMTL、JavaScript等の更新をリアルタイムに反映
* 同じネットワークにあれば、仮想マシンやスマートデバイスからも表示できる

参考：各種ブラウザを同期して手軽に複数環境での確認ができるようになるgrunt-browser-syncについて紹介するよ 
http://re-dzine.net/2013/12/grunt-browser-sync/

## grunt-coffeelint

CoffeeScriptをlintできる

参考：CoffeeLintを使ってみた 
http://codedehitokoto.blogspot.jp/2012/04/coffeelint.html

## grunt-concurrent

watchタスクの中身をつまみ食いするように監視させたい、けど標準の機能だとできない…。
そんな場合にはこれがあると便利!

参考：How to run two grunt watch tasks simultaneously
http://stackoverflow.com/questions/17585385/how-to-run-two-grunt-watch-tasks-simultaneously

## grunt-csscomb

CSSのプロパティをソートします。なんとなく意識高そうなので入れてる

参考：CSSプロパティをソートしてくれるgrunt-csscombについて紹介するよ 
http://qiita.com/t32k/items/e59cebb51825347689f9

## grunt-html-validation

何気に世話になってるかも…。W3CのルールでHTMLの検査をしてくれる。
タグの閉じ忘れや変なプロパティ名になることを回避できるので便利。

## grunt-jekyll

一番世話になってるかも。中々使いやすいHTMLプリプロセッサ。
jekyll, Sass, CoffeeScriptが、僕にとっての3種の神器!

参考：Jekyllいつやるの？ジキやルの？今でしょ！
http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/

## grunt-kss

CSSのドキュメント(スタイルガイド)生成に。デフォルトのテンプレートがダサいので、適当に恰好良いのを入れると良いと思う。かなり綺麗なドキュメントが作れるのでおすすめ。

参考：イケてるスタイルガイドを簡単に作れるgrunt-kssについて紹介するよ 
http://qiita.com/t32k/items/9e03e80061de21411765



## grunt-modernizr

定番ライブラリ[modenizr.js](http://modernizr.com)のカスタムビルドを生成してくれる。カスタマイズ設定がgruntfileに記述されるため、環境構築しやすい。

## grunt-scss-lint

SCSSのlintができる。まだあんまし使ってない…

## grunt-sitemap

[GoogleWebmasterTools](http://www.google.com/webmasters/)に送信する「sitemap.xml」を、静的ファイルをベースに自動生成してくれる。SEO対策に。

参考：サイトマップについて
https://support.google.com/webmasters/answer/156184?hl=ja

## grunt-text-replace

テキストの置換ができる。
ファイルの先頭へ、ビルドの度に日付を入れたいしたいときに便利。
正規表現も使える

## grunt-usemin

これは使えそう! concatや他のminify系プラグインよりも使い勝手が良く、そのうちこれに置き換えていきたい。yeomanのテンプレートでも使われている

参考：concat/minifyしたファイルへのリンクを grunt-usemin を使って自動で書き換える
http://nantokaworks.com/try-grunt-usemin/

#  プラグイン一覧：Contrib系

## grunt-contrib-compass

Sass/Compassのコンパイルに使う。定番

参考：CSSの常識が変わる！「Compass」、基礎から応用まで！
http://liginc.co.jp/designer/archives/11623

## grunt-contrib-clean

これは説明不要

## grunt-contrib-coffee

CoffeeScriptのコンパイルに使う。これも定番

参考：CoffeeScriptって何?
http://minghai.github.io/library/coffeescript/01_introduction.html

## grunt-contrib-connect

定番です。たいていbrowser-syncしか使わないけど、いざ即興でWebサーバを立ち上げたくなったときにあると便利。セッティングが楽なので

## grunt-contrib-copy

これも説明不要。ないと困る

## grunt-contrib-csslint

CSSをlintできる。reset.cssのコードが引っかかるので、正直ウザい

参考：CSSLintのRulesの超訳
https://gist.github.com/hail2u/1303613

## grunt-contrib-cssmin

CSSのミニファイに使う

## grunt-contrib-htmlmin

HTMLのミニファイに使う。意外と見落しがち

## grunt-contrib-imagemin

画像ミニファイに使う。定番

## grunt-contrib-livereload

動的サイトの場合はこれを使うケースが多い

## grunt-contrib-requirejs

requireJSの最適化ファイルを生成するr.jsをgruntに対応させたもの。requireJSを使うなら必須。

## grunt-contrib-uglify

JSミニファイに。定番
closure-compilarはインストールが面倒なので使っていない…

## grunt-contrib-watch

これがないと困る。説明不要

## grunt-contrib-yuidoc

JSドキュメント生成に。CoffeeScriptにもそのまま使える