使用すべき6つの重要なGruntプラグイン

コンテンツ

• 01. Uglify
• 02.サス
• 03. CSSMin
• 04.コンキャット
• 05. ImageMin
• 06.見る

GruntなどのJavaScriptタスクランナーは、フロントエンド開発者の間で非常に人気があります。これは、彼らが私たち全員が仕事でやりたいことの1つ、つまり時間を節約するのに役立つからです。

しかし、5,000を超える（そして数えている）Gruntプラグインが利用可能になったため、開発者がそれらの「原石のダイヤモンド」を見つけるのは難しい場合があります。使用すべきGruntプラグインの完璧なレシピを見つけるために、Gruntに夢中になっている時間を振り返りました。

01. Uglify

塩に値するすべてのフロントエンド開発者は、JavaScriptファイルを縮小することの利点を知っています。それは、まさにこのプラグインが行うことです。これが人気で、実際にはGrunt Getting StartedGuideに含まれています。名前にもかかわらず、このプラグインはJavaScriptコードを美化するためにも使用できますが、本番環境での使用には特に役立ちません。

02.サス

どのCSSプリプロセッサが実際にねぐらを支配するかについては議論があるかもしれませんが、ここStickyeyesでは、主要なライバルであるLessではなくSassに落ち着きました。このプラグインを使用すると、Sassファイルを作成して、CSSに自動的にコンパイルできます。 CSSプリプロセッサを使用するメリットは、それ自体が別の記事であることを保証しますが、CSSプリプロセッサをまだ使用していない場合は、パーティーに非常に遅れていると言っても過言ではありません。

03. CSSMin

このプラグインは、Uglifyと同等のCSSです。指定されたCSSファイルを取得して最小化します。もちろん、これをSassプラグインと組み合わせて使用​​する場合は、このタスクがSassタスクの後に実行されるようにする必要があります。

CSSMinには、わずかに異なる手法を使用してCSSファイルのサイズを縮小できる代替手段がたくさんあります。 CSS nano、CSS絞り、CSS縮小など。この種のものに興味がある場合は、この便利なベンチマークをお読みください。

04.コンキャット

名前が示すように、このプラグインは単に複数のファイルを取得し、それらを1つに連結します。コードの縮小と同様に、ファイルの連結もページの読み込み時間を短縮するための古くからのベストプラクティスです。

ファイルの連結は、JavaScriptとCSSの両方の本番環境で常に使用する必要があります。これは通常、CSS前処理タスクと縮小タスクの後に実行される最後のタスクです。このプラグインに特定のディレクトリ内のすべてのファイルを連結するように指示するのは簡単ですが、ファイルが連結される順序に注意してください。特定の順序を指定するか、ファイルに名前を付けて、常に必要な順序で連結されるようにする必要があります。 。

05. ImageMin

CSSMinやUglifyと同じように、ImageMinは、ページの読み込みに関するもう1つの古くからの問題である画像ファイルのサイズに取り組んでいます。画像の「縮小」は通常、最適化のための最初の呼び出しポートであるため、このプラグインは、ページファイルの合計サイズを可能な限り小さくするために不可欠です。

JPG、PNG、GIF、またはSVG（ますます人気のあるベクター画像形式）を使用している場合、このプラグインを使用すると、指を離さなくても画像のファイルサイズをロスレスに縮小できます。プロジェクトに多数の画像がある場合は、ウォッチイベントでこのタスクを実行するのではなく、本番環境にプッシュするときにのみこのタスクを実行することをお勧めします（次のポイントを参照）。

06.見る

このプラグインは実際にはWebサイトのフロントエンドに影響を与えませんが、効率的なGruntプロセスを作成するのに非常に役立ちます。 Watchは、指定したディレクトリを監視するだけで、何かが変更されると、特定のGruntタスクが自動的にトリガーされます。

そのため、JavaScriptタスクを実行するために「js」ディレクトリに1つの監視条件を設定し、CSSタスクを実行するために「css」ディレクトリに別の監視条件を設定できます。つまり、メインのGruntプロセスを手動で実行する必要はありません。変更を加える前に、うなり声の監視タスクを初期化するだけで、そこにあることさえ忘れることができます。

言葉： ジェイミーシールド

Jamie Shieldsは、デジタルマーケティングエージェンシーStickyeyesのバックエンド開発者です。

このような？これを読む！

• Grunt vs Gulp：どのJavaScriptビルドツールを選択する必要がありますか？
• Gruntのセットアップを改善する8つの方法
• 最高の無料のWordPressテーマ