Web制作が爆速になるGruntのプラグインを定番から最新のものまで10個ピックアップ！
- 2016年6月20日
- 7,436
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に対応する方法
