grunt.jsでパフォーマンステストを自動化します

キーテイクアウト

• grunt.jsタスクランナーを使用して、Web開発プロセス中にパフォーマンステストを自動化できます。パフォーマンス目標または「予算」がQAプロセスに厄介な手動テストを追加せずに満たされるようにします。
Grunt Perfuldgetプラグインは、Webpagetest.org APIを使用して、ページ重量、画像サイズ、スクリプト重量、レンダリング時間などのメトリックに対してサイトを測定します。開発者は、これらのメトリックの明示的な予算を設定できます。プラグインは、サイトを測定します。
• grunt.jsは、コードがエラーなしで効率的に実行され、時間を節約し、ヒューマンエラーのリスクを減らすことを保証するタスクを自動化するため、パフォーマンステストに重要です。これにより、より信頼性が高く高品質のソフトウェアにつながります
• この2 MBのWebページの年齢では、パフォーマンス予算が必要な部分になりつつあります。あなたのプロジェクトの利害関係者と協力して、あなたのウェブサイトのパフォーマンスの目標を設定するために、すべての人の責任 - デザイナーと開発者の両方になります。
さまざまなメトリックの予算を設定する場合があります。たとえば、500キロバイトのターゲットページ重量で、プロジェクト内の単一ページを超えることはできません。 500kbを超えるためにページに追加される要素は、デザインに含めることを決定するために、ページ上の他の要素に対して評価する必要があります。ティム・カドレックが説明しているように、あなたの決定は3つのパスのいずれかをとらなければなりません：

ページ上の既存の機能またはアセットを最適化

ページから既存の機能またはアセットを削除します

1. 新機能や資産を追加しないでください
2. を入力してください
3. grunt.js webpagetest.org =自動化されたパフォーマンステストBliss

あなたのウェブサイトのパフォーマンスを測定するのに役立つグラントプラグインがいくつかありますが、私が見つけた最も正確なパフォーマンスに焦点を当てています：Grunt Perfbudget。この素晴らしいグラントタスクは、WebPagetest.org APIを使用して、ページの重み、画像サイズ、スクリプトの重み、レンダリング時間などの多くの有用なメトリックからサイトを測定します。また、これらのメトリックの明示的な予算を設定することもできます。プラグインがサイトに対してサイトを測定する！

APIキーを取得します

Gruntタスクのセットアップを取得する前に、gruntfileに含めるAPIキーについてWebpagetest.orgにメールを送信する必要があります。 （良いニュース：作業にはこのプロセスに代わるものがあります！）

Grunt Perfuldgetプラグインをインストールします

これがグラントを使用するのが初めての場合は、Gruntで起きて実行するための私のチュートリアルをチェックしてください。

既にグラントをコンピューターにインストールしている場合は、パフォーマンステストをセットアップする前に、パフォーマンスプラグインをインストールするだけです。コマンドラインを介してプロジェクトフォルダーに移動して実行します：

npm install grunt-perfbudget --save-dev

またはサンプルプロジェクトを操作したい場合は、GitHubリポジトリ、Grunt-Perfbudget-Demo、NPMインストールを実行して実行します。

PerfBudgetタスクを構成

プラグインをインストールしたら、プラグインオプションをセットアップし、gruntfile.jsにタスクを作成する必要があります。デフォルトのGruntコマンドの一部としてPerfbudgetタスクを実行するデモGruntFileを作成しました。

APIキーセットでデフォルトのグラントタスクを実行すると、コンソールで次の出力を取得します。

module<span>.exports = function(grunt){
</span>  <span>require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
</span>
  grunt<span>.initConfig({
</span>    <span>pkg: grunt.file.readJSON('package.json'),
</span>
    <span>perfbudget: {
</span>      <span>default: {
</span>        <span>options: {
</span>          <span>url: 'http://cfarman.com',
</span>          <span>key: 'APIKEY'
</span>        <span>}
</span>      <span>}
</span>    <span>}
</span>  <span>});
</span>
  grunt<span>.registerTask('default', ['perfbudget']);
</span><span>};</span>

なぜ私のタスクが失敗したのですか？私のウェブサイトがデフォルトの予算を渡さなかったため、1000ミリ秒未満でレンダリングされたためです。また、「SpeedIndex」と呼ばれるメトリックでも失敗しました。 Webページのパフォーマンスについて詳しく知るにはどうすればよいですか？幸いなことに、WebPageTestには、PerfCrodgetテストのコンソールから直接リンクされている非常に詳細なURLを参照できます！ 私のウェブサイトを渡すために、グラントタスクを失敗させないために（したがって、自動ビルド環境でWebサイトのビルドを停止するのを停止します）、2つのオプションがあります。パフォーマンスにはそれほど多くありません！）または、パフォーマンス予算ルールに従うことができます。デフォルトのメトリックに合格するまで、最適化、削除、またはものの追加を停止します。とりあえず、私たちのうなり声のタスクで遊んで、合格テストがどのように見えるかを見てみましょう。

PerfBudgetオプションとWebPagetestメトリック

ほとんどのgruntタスクと同様に、パフォーマンスタスクでは、さまざまなオプションをカスタマイズできます。また、WebPageTestで測定された驚くほど詳細なメトリックのため、パフォーマンス予算のあらゆる種類のメトリックをテストして、合格するか失敗したかを確認できます。

最初に、私のオプションを変更して、私のウェブサイトが失敗を停止し、Gruntタスクが予算内にあると報告するようにします。これには、「予算」と呼ばれる私のパフォーマンスタスクに追加のプロパティが必要です。

この時点で私のサイトはかなり遅いので、テストに合格するために私の価値が高くなります。

結果？私は通り過ぎました！

<span>perfbudget: {
</span>  <span>default: {
</span>    <span>options: {
</span>      <span>url: 'http://cfarman.com',
</span>      <span>key: 'APIKEY',
</span>      <span>budget: {
</span>        <span>render: '3000',
</span>        <span>SpeedIndex: '5500'
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>}</span>

これは、gruntタスクが失敗しないことを意味し、私のgruntfileに他のタスクがある場合、それらは通常どおり続行します - 成功！

デフォルトのメトリックに加えて、他に何を測定できますか？ ：

を含むあらゆる種類のもの

• 負荷時間：ミリ秒単位の総負荷時間
• リクエスト：要求されたファイルの総数
• bytesin：バイトの合計ページ重量

最後のメトリックは、私が最も一般的に報告し、予算編成の目的で追跡したいものです。そのため、測定方法を見てみましょう。

npm install grunt-perfbudget --save-dev

この時点での平均ページの重量は2メガバイトを下回っているため、200万の合計バイトの予算を選択しました。予算のオプションを編集したら、グラントタスクをもう一度実行することで自分のやり方を見ることができます：

私のウェブサイトは3メガバイトで時計が入り、予算を超えています！やるべきことがあるようです。しかし、この情報を手元に置くことは、開発者として私にとって非常に役立ちます。他のGruntプラグインは、このような軽量でテストしやすい方法で、総ページ重量に関する情報を提供するものはありません。これらの重要なメトリックを測定することで、開発の決定の本当の影響を見ることができます

- 結果としてパフォーマンスを改善するのに役立ちます。 grunt.js

によるパフォーマンステストの自動化に関するよくある質問

grunt.jsとは何ですか？パフォーマンステストに重要なのはなぜですか？

grunt.jsは、ミニフィッシュ、編集、単体テスト、糸くずなどの繰り返しタスクを自動化するJavaScriptタスクランナーです。 node.jsに構築され、コマンドラインインターフェイスを使用して、gruntfileとして知られるファイルで定義されたカスタムタスクを実行します。 grunt.jsは、開発者がコードが効率的かつエラーなしで実行されることを保証するタスクを自動化できるため、パフォーマンステストに重要です。これにより、時間を節約し、ヒューマンエラーのリスクを軽減し、より信頼性が高く高品質のソフトウェアにつながります。最初に、システムにnode.jsとnpm（ノードパッケージマネージャー）をインストールする必要があります。これらを取得したら、ターミナルにコマンドnpmインストール-g grunt -cliを実行してgrunt.jsをインストールできます。これにより、システムにGrunt Command Lineインターフェイスがグローバルにインストールされます。その後、Package.jsonファイルで依存関係として定義し、npmインストールを実行することにより、プロジェクトにグラントプラグインとグラントプラグインを追加できます。 > GruntFileは、プロジェクトのルートディレクトリに掲載され、Gruntタスクの構成が含まれるJavaScriptファイルです。 gruntfile.jsまたはgruntfile.coffeeという名前で、javascriptまたはcoffeescriptで書かれています。 gruntfileを作成するには、グラントランタイムのインスタンスとこの関数内で渡されるラッパー関数を定義します。グラントプラグインをロードし、タスクを構成し、カスタムタスクを登録できます。

grunt.jsで自動化できるいくつかの一般的なタスクは何ですか？

grunt.jsは、パフォーマンスのテストとコードの最適化に関連する幅広いタスクを自動化できます。これには、JavaScriptおよびCSSファイルのサイズを縮小し、CSSにSASSファイルをコンパイルしてCSSにリントすること、エラーをキャッチしてコーディング標準を実施するためのJavaScriptコードを並べること、コードが予想どおりに機能することを確認するためのユニットテストを実行するためのユニットテストを実行すること、およびファイルの数を減らすために、JavaScriptファイルを模倣することが含まれます。 httpリクエスト。

grunt.jsを使用してパフォーマンステストを自動化するにはどうすればよいですか？

grunt.jsでテストすると、grunt-contrib-uglifyのようなプラグイン、CSSのミニフィッシュのためのgrunt-contrib-cssmin、糸くずのためのgrunt-contrib-jshint、ユニットテストのためのグラントコントリブqunitを使用できます。これらのプラグインをnpm経由でインストールし、grunt.loadnpmtasks（）でgruntfileにロードし、grunt.initconfig（）メソッドにプロパティを追加して構成します。その後、コマンドラインからタスクをgrunt 。 grunt.js他のタスクを呼び出すタスクを定義することにより。 gruntfileでは、grunt.registertask（）を使用して、指定された順序で複数のタスクを実行するタスクを定義できます。たとえば、grunt.registertask（ 'default'、['jshint'、 'qunit'、 'uglify']）; Jshint、Qunit、およびUglifyタスクをその順序で実行します。 .initconfig（）gruntfileのメソッド。各タスクには、動作を制御するオプションのセットがあり、これらはタスクの構成オブジェクトで指定できます。たとえば、Uglifyタスクには、JavaScriptコードの模倣方法をマングル、圧縮、および美化するオプションがあります。 > GruntプロジェクトのPackage.jsonファイルは、プロジェクトの依存関係を管理するために使用されます。プロジェクトを実行する必要があるグラントプラグインとその他のNPMパッケージがリストされています。 NPMインストールを実行すると、NPMはPackage.jsonファイルを調べ、リストされているパッケージをインストールします。これにより、プロジェクトの依存関係を簡単に管理して共有できます。

他のテストフレームワークでgrunt.jsを使用できますか？ Mocha、Jasmine、Qunitなどの人気のあるテストフレームワーク用のグラントプラグインがあります。また、他のフレームワークでテストを実行するためのカスタムタスクを作成することもできます。これにより、grunt.jsはパフォーマンステストを自動化するための汎用性の高いツールになります。パフォーマンステストにgrunt.jsを使用するためのいくつかのベストプラクティスは何ですか？

パフォーマンステストにgrunt.jsを使用するためのいくつかのベストプラクティスには、gruntfileを清潔に保ち、複数のファイルに分割して整理することが含まれます。 - タスクを実行するときに詳細な出力を取得するときにフラグを実行し、 - フォースフラグを使用して、失敗してもタスクを実行し続けます。また、最新の機能とバグの修正を取得するために、グラントプラグインを定期的に更新することをお勧めします。

以上がgrunt.jsでパフォーマンステストを自動化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。