Webサイトを制作する際、各種構成ファイルのコピーや削除、jsミニファイル、html・CSSの構文チェックなど、一つ一つ手でやるのは手間ですし、間違いの元にもなります。
タスク自動化ツール「Grunt」は、これらの作業すべてを自動化する優れものです。

プラグインで機能拡張もできるので、目的に応じてカスタマイズしてWebサイトをより効率的に制作することができます。

今回は、Gruntの定番・最新プラグインを厳選してご紹介します。

このニュースを読んだあなたにオススメ

WordPressにプラグインを追加してみよう
作業効率に不可欠！WordPressオススメのプラグインまとめ
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法

Gruntを便利にしてくれる定番と最新のプラグイン10選

npm.png

1.grunt-este-watch

https://www.npmjs.com/package/grunt-este-watch

Watchさせておくと、変更があったファイルに対して自動で設定しておいたタスクを実行できるプラグインです。
例えば、変更があったファイルに関連するファイルをまとめて動作テストすることができます。

また、同様の機能で有名なプラグイン「grunt-contrib-watch」に比べると「grunt-este-watch」のほうがCPU消費量が非常に少ないため、リソースを消費しないのが大きな違いです。

2.load-grunt-tasks

https://www.npmjs.org/package/load-grunt-tasks

Gruntプラグインをロードする際にはGruntfile.jsにロードさせるように記述する必要がありますが、「load-grunt-tasks」を入れておくことで自動でロードしてくれます。

ついつい忘れてしまいがちな“ロード忘れ”を防ぐことができます。

3.grunt-contrib-clean

https://www.npmjs.com/package/grunt-contrib-clean

ファイルを消去するcleanタスクを定義するプラグインです。

Releaseディレクトリを削除してくれるので、例えば制作時に不要なファイルをまとめて消したり、あるいはリリースに伴って異なったバージョンのファイルを消してきれいな状態にしたりすることができる便利なプラグインです。

4.grunt-contrib-jshint

https://www.npmjs.com/package/grunt-contrib-jshint

Java Scriptのコードチェッカーである「JSHint」をGruntで使うためのプラグインです。
「JSHint」では、さまざまなオプションを使ってJava Scriptの構文チェックを行ってくれます。

Gruntを使って自動的に行うことで、効率よくプログラムの誤りを見つけることができ、プログラムの品質を上げることが出来ます。

5.grunt-contrib-uglify

https://www.npmjs.com/package/grunt-contrib-uglify

このプラグインは「UglifyJS」というJava Script用の高機能な圧縮・最適化ツールをGruntで自動化できるようにモジュール化したものです。

WebサイトでのJava Scriptの処理速度はファイルのサイズや、コードのパース速度などに大きく影響するので、最適化することでWebサイトのパフォーマンス向上に大いに役立ちます。

6.grunt-contrib-cssmin

https://www.npmjs.com/package/grunt-contrib-cssmin

CSSファイル中のコメントや改行を削除して、サイズを圧縮するプラグイン。

先ほどの「grunt-contrib-uglify」もそうですが、ファイルサイズを小さくすることで処理速度の向上につながるため、Webサイトのパフォーマンス向上に貢献します。

7.grunt-html-validation

https://github.com/praveenvijayan/grunt-html-validation

Webサイト制作時のコードチェック作業は根気と手間のかかる作業です。このプラグインでは、そういったHTMLの構文が正しいかどうかを自動でチェックしてくれるプラグインです。

これを使うことによって、Webサイト制作作業の効率が大幅に向上するでしょう。

8.grunt-browser-sync

https://www.npmjs.com/package/grunt-browser-sync

今はIEやChromeをはじめ、数多くのブラウザがあり、スマートフォンも含めるとサイト制作の際に必要なブラウザチェック（動作の仕方や見え方等の確認）は多岐にわたります。

このプラグインを使うことで、各種ブラウザのチェックを手軽にしてくれます。

9.grunt-concurrent

https://www.npmjs.com/package/grunt-concurrent

こちらのプラグインは、変更を保存するたびに予め設定したタスクを実行する「grunt-contrib-watch」や「grunt-este-watch」といったプラグインがいつ・何をしたか、を監視するプラグインです。

標準のGruntの機能自体ではこのように監視できないため、痒いところに手が届くようなプラグインです。

10.grunt-usemin

https://github.com/yeoman/grunt-usemin

Web制作ではHTML, Java ScriptやCSS関連ファイルなど、さまざまなファイルを取り扱います。このプラグインは、これらのファイルを一元管理することができます。

例えば、制作用にはこのフォルダ、リリース用にはこのプロジェクト……など、フレキシブルに切り替えられますので、手動でファイルのパス設定を切り替える手間が省けます。