JavaScript
Node.js
grunt

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

More than 3 years have passed since last update.


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

デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。

デザイナーだけどフロントエンドに興味ある人向け。

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にもそのまま使える