Web制作が爆速になるGruntのプラグインを定番から最新のものまで10個ピックアップ！
- 2016年6月20日
- 6,367
ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
>> 著者詳細はこちら
Webサイトを制作する際、各種構成ファイルのコピーや削除、jsミニファイル、html・CSSの構文チェックなど、一つ一つ手でやるのは手間ですし、間違いの元にもなります。
タスク自動化ツール「Grunt」は、これらの作業すべてを自動化する優れものです。
プラグインで機能拡張もできるので、目的に応じてカスタマイズしてWebサイトをより効率的に制作することができます。
今回は、Gruntの定番・最新プラグインを厳選してご紹介します。
このニュースを読んだあなたにオススメ
WordPressにプラグインを追加してみよう
作業効率に不可欠！WordPressオススメのプラグインまとめ
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法
Gruntを便利にしてくれる定番と最新のプラグイン10選
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関連ファイルなど、さまざまなファイルを取り扱います。このプラグインは、これらのファイルを一元管理することができます。
例えば、制作用にはこのフォルダ、リリース用にはこのプロジェクト……など、フレキシブルに切り替えられますので、手動でファイルのパス設定を切り替える手間が省けます。
まとめ
GruntはWebサイトの制作の効率を劇的に向上させる便利なツールです。また、世界中の制作者によって無数のプラグイン（機能拡張モジュール）がリリースされており、常に新たな機能を拡張できるのも大きな特徴です。
今回ご紹介したものも含めて、無数のプラグインの中から「これは」と思うものを見つけ出す喜びもまた、制作者にとっては好奇心をくすぐるのではないでしょうか。
このニュースを読んだあなたにオススメ
WordPressにプラグインを追加してみよう
作業効率に不可欠！WordPressオススメのプラグインまとめ
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法
