どんなニーズに基いているか
デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。
デザイナーだけどフロントエンドに興味ある人向け。
2015-02-07: gulp編を作成
gruntからgulpへ移行したので、gulp版の一覧も作成しました。
僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita
プラグイン一覧:非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のカスタムビルドを生成してくれる。カスタマイズ設定がgruntfileに記述されるため、環境構築しやすい。
grunt-scss-lint
SCSSのlintができる。まだあんまし使ってない…
grunt-sitemap
GoogleWebmasterToolsに送信する「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にもそのまま使える