
Web制作が爆速になるGruntのプラグインを定番から最新のものまで10個ピックアップ!
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関連ファイルなど、さまざまなファイルを取り扱います。このプラグインは、これらのファイルを一元管理することができます。
例えば、制作用にはこのフォルダ、リリース用にはこのプロジェクト……など、フレキシブルに切り替えられますので、手動でファイルのパス設定を切り替える手間が省けます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プログラム
- プログラムとは、ここではコンピューターが行うべき処理を順序立てて記述したものを指します。 すべてのコンピューターはプログラムに従って動作しており、データとして表現され、記憶装置に格納されます。広義では「ソフトウェア」の一部ですが、プログラムの一部でソフトウェアという語を用いる場合もあります。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ファイルサイズ
- ファイルサイズとは、コンピューターで扱うファイルの容量のことをいいます。 ハードディスクなどにファイルを転送する際などは、この容量をしっかりチェックしておく必要があります。その数値に応じてデータをコンピューターに保存することができます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
関連ツール・サービス
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング