Gruntfileを最適化する

はじめに

Gruntがあなたにとって新しい言葉であるなら、最初にChris Coyers の記事「Gruntのようなものはくて重いと思う人々のためのGrunt」を読むことができます。 クリスからの紹介の後、あなたはあなた自身のGruntプロジェクトを持ち、Gruntが私たちに提供するすべての機会をすでに味わっているでしょう。



この記事では、Gruntの多数のプラグインをプロジェクトに追加するのではなく、アセンブリ自体を作成するプロセスに焦点を当てます。 Gruntでの作業の次の側面で実践的なスキルを習得します。

• gruntfileを整理整頓する方法
• ビルド時間を大幅に改善する方法
• ビルドステータスに遅れないようにする方法

叙情的な余談：Gruntは、タスクの実行に使用できる多くのデバイスの1つにすぎません。 Gulpがあなたにぴったりなら、 すごい ！ この記事で説明されている機能を確認した後でも、ビルド用の独自のツールセットを作成したい場合は、問題ありません！ この記事でGruntをレビューします。Gruntは、すでに多数のユーザーがいるエコシステムであるためです。

Gruntfileの整理

多くのGruntプラグインをプラグインするか、Gruntfileに多くのタスクを記述しようとすると、すぐに面倒でサポートが難しくなります。 幸いなことに、この特定の問題に特化したプラグインがいくつかあります。Gruntfileをきれいで整然とした外観に戻します。

最適化前のGruntfile

これは、最適化前のGruntfileの外観です。

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: ['src/js/jquery.js','src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'], dest: 'dist/build.js', } }, uglify: { dist: { files: { 'dist/build.min.js': ['dist/build.js'] } } }, imagemin: { options: { cache: false }, dist: { files: [{ expand: true, cwd: 'src/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', ['concat', 'uglify', 'imagemin']); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今なら、「おい！ それはもっと悪いだろうと思った！ 維持することはかなり可能です！」、それからおそらくあなたは正しいでしょう。 簡単にするために、カスタマイズなしで3つのプラグインのみを追加しました。 この記事で「戦闘」プロジェクトで使用される実際のGruntfileの例を提供する場合、無限のスクロールが必要になります。 さて、それについて何ができるか見てみましょう！

プラグインを自動ロードする

ヒント： load-grunt-configにはload-grunt-tasksが含まれているので、読みたくない場合はこの記事をスキップして、気持ちを害することはありません。



新しいプラグインをプロジェクトに追加する場合は、プロジェクトの依存関係としてpackage.jsonに追加し、Gruntfileにロードする必要があります。 プラグイン「 grunt-contrib-concat 」の場合、次のようになります。

 // tell Grunt to load that plugin grunt.loadNpmTasks('grunt-contrib-concat');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

npmを使用してプラグインを削除し、package.jsonを編集したが、Gruntfileの更新を忘れると、アセンブリが壊れます。 小さなプラグイン「load-grunt-tasks」が私たちの助けになります。



ここまでは、Gruntプラグインを手動でロードする必要がありました。

 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-imagemin');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

load-gurnt-tasksを使用すると、コードの量を1行に減らすことができます。

 require('load-grunt-tasks')(grunt);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインを接続すると、package.jsonが分析され、プラグインの依存関係ツリーが決定され、自動的にロードされます

分割構成ファイル

load-grunt-tasksは、Gruntfileのサイズと複雑さを軽減しますが、大規模なアプリケーションを構築する場合、ファイルサイズは引き続き着実に増加します。 この時点で、新しいプラグインload-grunt-configが登場します！ Gruntfileをタスクに分割できます。 さらに、load-grunt-tasksとその機能をカプセル化します！



重要： Gruntfileを共有することは、常に最適なソリューションとは限りません。 タスク間で関連する設定が多数ある場合（Gruntfileの標準化など）、もう少し注意する必要があります。



「load-grunt-config」プラグインを使用すると、Gruntfileは次のようになります。

 module.exports = function(grunt) { require('load-grunt-config')(grunt); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、そうです！ これがファイル全体です！ しかし、構成ファイルは今どこにありますか？



ディレクトリを作成してgruntという名前を付けます。 Gruntfileがあるディレクトリで実行してみましょう。 デフォルトでは、プラグインは、使用するタスクで指定された名前でこのディレクトリのファイルを接続します。 プロジェクトの構造は次のようになります。

 - myproject/ -- Gruntfile.js -- grunt/ --- concat.js --- uglify.js --- imagemin.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それでは、各タスクの設定を個別のファイルに設定しましょう（これは、Gruntfileからの通常のコピーペーストであることがわかります）。



grunt / concat.js

 module.exports = { dist: { src: ['src/js/jquery.js', 'src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'], dest: 'dist/build.js', } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

grunt / uglify.js

 module.exports = { dist: { files: { 'dist/build.min.js': ['dist/build.js'] } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

うなり声/ imagemin.js

 module.exports = { options: { cache: false }, dist: { files: [{ expand: true, cwd: 'src/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScript構成ブロックが自分のものでない場合、load-grunt-tasksではYAMLまたはCoffeeScript構文を使用することもできます。 YAMLを使用して最後に必要なファイルを書きましょう。 これはエイリアスファイルになります。 これは、すべてのタスクエイリアスが登録されているファイルです。 これは、registerTask関数を呼び出す前に行う必要のあることです。 実際のファイルは次のとおりです。



grunt / aliases.yaml

 default: - 'concat' - 'uglify' - 'imagemin'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上です！ コンソールで次のコマンドを実行します。

 $ grunt
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが正常に機能した場合、実際、Gruntの「デフォルト」タスクを作成しました。 関連ファイルで指定した順序ですべてのプラグインを実行します。 さて、Gruntfileを3行のコードに減らしたので、どのタスクでも行を修正するためにGruntfileに再度行く必要はありません。これは完了です。 しかし、やめてください、それはまだ非常に遅いです！ つまり、すべてが集まるまでに多くの時間を待たなければなりません。 これを改善する方法を見てみましょう！

組立時間を最小化

Webアプリケーションのダウンロード速度と起動時間は、ビルドに必要な時間よりも重要ですが、速度が遅いと、多くの不便が生じます。 これにより、 grunt-contrib-watchなどのプラグインを使用してアプリケーションを自動的にアセンブルするプロセス、またはGitへのコミット後にビルドするプロセスが非常に「困難」になります-これは実際の拷問に変わります。 要するに、アセンブリの実行が速いほど、ワークフローはより良く、より速くなります。 プロダクションアセンブリが10分以上かかる場合、極端な場合にのみそれに頼り、組み立てられる間、コーヒーを飲みに行きます。 これは生産性の低下です。 しかし、絶望しないでください、私たちには違いを生むことができる何かがあります。

変更されたもののみを収集します： grunt-newer

ああ、この感覚は、プロジェクト全体を組み立てた後、いくつかのファイルを変更し、すべてが再び組み立てられるまで2回目のラウンドで待機する必要がある場合です。 src / img /ディレクトリ内の1つの画像を変更する例を見てみましょう-この場合、imageminを実行して画像の最適化を実行するのは理にかなっていますが、1つの画像に対してのみです。もちろん、この場合はconcatとuglifyを再起動するだけです貴重なプロセッサ時間の無駄。



もちろん、いつでも実行できます

 $ grunt imagemin
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

標準ではなくコンソールから

 $ grunt
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

。 これにより、必要なタスクのみを実行できますが、より合理的なソリューションがあります。 それはうなり声の新しいと呼ばれます。



Grunt-newerにはローカルキャッシュがあり、そこに変更されたファイルに関する情報を保存し、そのファイルに対してのみタスクを実行します。 接続方法を見てみましょう。



aliases.yamlを覚えていますか？ 変えましょう

 default: - 'concat' - 'uglify' - 'imagemin'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これに：

 default: - 'newer:concat' - 'newer:uglify' - 'newer:imagemin'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

簡単に言えば、タスクのいずれかにプレフィックス「newer：」を追加するだけです。最初にgrunt-newerプラグインを介して渡す必要があります。このプラグインは、タスクを実行するファイルと実行しないファイルを決定します。

タスクを並行して実行する： grunt-concurrent

grunt-concurrentは、互いに独立した多くのタスクがあり、多くの時間がかかる場合に非常に役立つプラグインです。 プロセッサのコアを使用し、それらのタスクを並列化します。



特にクールなのは、このプラグインの構成が非常に簡単なことです。 load-grunt-configを使用する場合は、slを作成します。 ファイル：



grunt / concurrent.js

 module.exports = { first: ['concat'], second: ['uglify', 'imagemin'] };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初（最初）と2番目（2番目）のキューの並列実行を設定するだけです。 最初の段階では、「concat」タスクのみを実行します。 2番目の段階では、uglifyとimageminを実行します。 これらは相互に独立しており、並行して実行されるため、実行時間は両方のタスクに共通です。



grunt-concurrentプラグインを介して処理されるように、デフォルトタスクのエイリアスを変更しました。 変更されたaliases.yamlファイルは次のとおりです。

 default: - 'concurrent:first' - 'concurrent:second'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでGruntアセンブリを再起動すると、コンカレントプラグインはまずconcatタスクを開始し、次に異なるプロセッサコアで2つのスレッドを作成して、imageminとuglifyが並行して動作するようにします。 かっこいい！



簡単なヒント ：単純な例では、うなり声の同時発生がビルドを著しく高速化する可能性は非常に低いです。 その理由は、Gruntインスタンスに追加のスレッドを実行するためのオーバーヘッド（オーバーヘッド）です。 私の計算から判断すると、少なくとも300ms /ストリームかかります。

アセンブリにはどれくらい時間がかかりましたか？ 時間のうなり声が助けになります

さて、これですべてのタスクが最適化されました。各タスクにかかる時間を知ることは非常に便利です。 幸いなことに、この仕事を完璧に行うプラグインがあります。



time-gruntは古典的な意味でのプラグインではなく（loadNpmTask経由では接続しません）、むしろload-grunt-configなどの「直接」接続するプラグインを指します。 load-grunt-configの場合と同じ方法で、このプラグインの接続をGruntfileに追加します。 Gruntfileは次のようになります。

 module.exports = function(grunt) { // measures the time each task takes require('time-grunt')(grunt); // load grunt config require('load-grunt-config')(grunt); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

失望をおallびしますが、それだけです-コンソールからGruntを再起動してみてください。各タスク（およびアセンブリ全体）について、ランタイムに関する適切にフォーマットされた情報が表示されるはずです。

自動警報システム

すべてのタスクを迅速に実行し、自動アセンブル（つまり、grunt-contrib-watchプラグインまたはコミット後のフックの使用によるファイルへの変更の追跡）の機能を提供する、最適化されたコレクターが用意できたので、システムを持つことは素晴らしいことですそれはあなたの新しいビルドが使用する準備ができたとき、または何かがうまくいかないときあなたに警告することができるでしょうか？ grunt-notifyに会います。



デフォルトでは、grunt-notifyは、Gruntがスローするすべてのエラーと警告に対して自動アラートを提供します。 これを行うには、Mac OS XまたはWindows用のGrowl、Mountain LionおよびMavericksのNotification Center、Notify-sendなど、OSにインストールされている警告システムを使用できます。 この機能を取得するために必要なのは、npmリポジトリからプラグインをインストールし、Gruntfileに接続することだけです（上記のようにgrunt-load-configを使用する場合、このステップは自動化されます！）。



オペレーティングシステムに応じてプラグインがどのように機能するかを次に示します。







エラーと警告に加えて、最後のタスクの後に開始するように構成しましょう。

grunt-contrib-configを使用してファイル間でタスクを分離することを前提としています。 必要なファイルは次のとおりです。



grunt / notify.js

 module.exports = { imagemin: { options: { title: 'Build complete', // optional message: '<%= pkg.name %> build finished successfully.' //required } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構成のハッシュキーによって、grunt-notifyに接続するタスクの名前が決まります。 この例では、imageminタスク（実行するリストの最後のタスク）が完了した直後にアラートを生成します。

そして結論として

この記事で説明したように、最初からすべてを行った場合、並列化と選択的処理により非常に高速で、非常に高速で組織化されたコレクターの誇りのある所有者であると考えることができます。 また、アセンブリの結果については、慎重に通知されることを忘れないでください！



Gruntの改善に役立つその他の興味深いソリューション、または便利なプラグインを見つけた場合は、お知らせください！ それまでの間、ビルドは成功しました！

翻訳者から

私はこの記事をできるだけオリジナルに近い形に翻訳しようとしましたが、いくつかの場所で「ロシア語で聞こえる」ようにいくつかの軽薄さを作りました。 英語の文章を作成するすべての順番と方法がロシア語にうまく適合するわけではありません。 私はあなたが理解してこれを扱うことを本当に願っています。



記事をお楽しみください。 建設的な批判と改善の提案を聞いてうれしいです。 コメントも歓迎します！