あなたのウェブサイトのパフォーマンスを向上させる5つのgruntタスク

キーハイライト：

• Gruntは、圧縮や縮小などのプロセスを自動化することにより、Webサイトの最適化を合理化します。 重要なタスクには、画像圧縮のgrunt-contrib-imagemin、javaScriptの縮小の場合はgrunt-contrib-uglify、CSS圧縮の場合はgrunt-contrib-cssminに含まれます。
他の貴重なgruntタスクは
• であり、未使用のCSSを除去し、grunt-uncssはHTMLを模倣します。 HTMLの削減は、ファイルサイズの削減が少ない場合しかありませんが、すべての最適化はWebパフォーマンスの向上のためにカウントされます。 grunt-contrib-htmlminこれらのユーザーフレンドリーなグラントタスクは、ウェブサイトのロード時間を加速することにより、ユーザーエクスペリエンスを大幅に向上させます。 ワークフローへのシームレスな統合により、効率と有効性が向上します。
• 今日のデジタル景観では、ウェブサイトのパフォーマンスが最重要です。 以前のSitePointの記事（「リソースタイミングAPIの紹介」、「ユーザータイミングAPIの発見」、およびCraig Bucklerの「ページ重量を減らすための完全なガイド」）で説明したように、パフォーマンスのボトルネックの理解とアドレス指定は重要です。 GruntやGulpなどのタスクランナーは、多くの手動最適化タスクを自動化し、ワークフローを改善します。この記事では、Webページのパフォーマンスを向上させる5つのうなり声のタスクについて詳しく説明しています。

画像は、ウェブサイトのサイズに大きな貢献者です。 httparchive.orgの統計では、画像が多くの場合、ページの合計サイズの63％以上を説明しています。 多くの場合、画像は最適に圧縮されていません。 grunt-contrib-imagemin一般的な画像形式のオプティマイザーを提供することにより、これに対処します：

grunt-contrib-imagemin（gif）

• （jpeg）gifsicle
• （png）jpegtran
• （svg）optipng
• サンプル構成：svgo
この構成は、

（0-7、デフォルト3）を使用して、

。

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

optimizationLevel: 5src/images dist/

JavaScriptコードを模倣します。空白を削除し、変数/関数名を短くします。 便利なオプションには、

（デバッグ用）および（メタデータを追加するため）が含まれます。 このJavaScriptを検討してください：grunt-contrib-uglify

ミニフィッシュはそれを次のように変換します

grunt-contrib-uglify構成例：sourceMap banner

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};

CSSファイルを圧縮して、

と同様に、

オプションを提供します。 単純な構成：

uglify: {
   dist: {
      options: {
         sourceMap: true,
         banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
      },
      files: {
         'dest/output.min.js': ['src/input.js'],
      }
   }
}

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

これはすべてのCSSをsrc/cssでdist/css/style.min.css。

grunt-uncss

未使用のCSSを削除して、ファイルサイズを削減します。 BootstrapやFoundationなどのフレームワークを使用する場合、特に有益です。 grunt-uncss（セレクターを除く）やignore（スタイルシートを無視する場合）などのオプションが利用可能です。 例：ignoreSheets

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

grunt-contrib-htmlmin

htmlを最小化して、控えめなサイズの削減を提供します。 特にGZIP圧縮では、衝撃は小さくなる可能性がありますが、あらゆるビットが役立ちます。 構成：grunt-contrib-htmlmin

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};

これにより、すべてのHTMLファイルが

で処理され、コメントを削除し、折りたたみ式のホワイトスペースを獲得し、出力をsrc。 dist/

結論

これらの5つのgruntタスクは、ウェブサイトのパフォーマンスを大幅に改善するための簡単な方法を提供します。 使いやすさにより、ユーザーエクスペリエンスを向上させるための非常に貴重なツールになります。 これらのタスクを使用しましたか？ あなたの経験とお気に入りのうなり声を共有してください！ グラントとウェブサイトのパフォーマンスに関する包括的なFAQセクションを以下に入手できます。

（FAQセクションはここに続き、元のFAQの構造と内容を反映していますが、より良い流れと簡潔さのために言い換えます。

以上があなたのウェブサイトのパフォーマンスを向上させる5つのgruntタスクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。