Web制作が爆速になるGruntのプラグインを定番から最新のものまで10個ピックアップ！

2018年01月31日

CMS・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のプラグインを導入することで、機能が拡張していきます。様々な機能のプラグインが多数用意されており、管理画面やFTPクライアントを通じてアップロードし、インストールすることで使用できるようになります。有効化しただけで動くものもあれば、個別の設定が必要なプラグインもあります。実際に行うインストール作業を追いながら覚えていきましょう。