Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

公開日： : 最終更新日：2014/05/05 JavaScript ,

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードしたりすることができます。

その恩恵にあずかり、手間が減って作業効率は上がっているんですが、CPU 使用率も上がっています。
CPU 使用率を下げるために、簡単に試せる方法があったのでその結果をメモしておきます。

icatch-load_6161289029_mini

photo credit: staffan.scherz via photopin cc

目次

1. 検証方法

何を検証したかというと、watch タスクのオプション spawn: false です。

“grunt watch 遅い” とかで検索すると、次のページにこの方法が載っていました。

他にも grunt-contrib-watch ではなく grunt-este-watch を使う方法が見つかったのですが、spawn:false のほうがお手軽だったので、まずはこちらを試してみました。

設定は、Gruntfile.js を次のようにします。

module.exports = function(grunt) {
    grunt.initConfig({
        // パッケージファイルを読み込む
        pkg: grunt.file.readJSON('package.json'),

        // grunt-contrib-connect の設定
        connect: {
            live: { // LiveReload 用の設定
                options: {
                    hostname: 'localhost', port: 9000
                }
            }
        },

        // grunt-contrib-watch の設定
        watch: {
            live: { // LiveReload 用の設定
                // プロジェクト下のある 全 HTML, CSS, JavaScript を監視対象とする
                files: ['**/*.html', '**/*.css', '**/*.js'],
                options: {
                    spawn: false, // ← コレがその設定
                    livereload: true // 上記のファイルが更新されたらブラウザをリロードする
                }
            }
        }
    });

    // LiveReload するために必要なタスクをロードする
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // `grunt` コマンドで実行するデフォルトタスクを定義する
    grunt.registerTask('default', ['connect:live', 'watch:live']);
};

2. 検証結果

spawn:false のある・なしで、自宅と職場で試してみました。
それぞれの結果は次の通りです。

2-1. 自宅

自宅のマシンスペックは次の通りです。

home-mashine-spec

もう何年も前に買ったマシンなのでパワー不足は否めません。
メモリは6GBに増設してますが、いろいろきついです。

さて、次が spawn:false なし（デフォルト）での watch タスクが出力したログです。

$ grunt
Running "connect:live" (connect) task
Started connect web server on http://localhost:9000

Running "watch:live" (watch) task
Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...

タスクの実行自体に時間はかかっていませんが、CPU 使用率は確実に上がります。

home-spawn_default

タスクを実行したタイミングで、使用率が 100% になっています。

次に spawn:false ありの watch タスクが出力したログです。

$ grunt              
Running "connect:live" (connect) task
Started connect web server on http://localhost:9000

Running "watch:live" (watch) task
Waiting...

Reloading watch config...

Running "watch:live" (watch) task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch:live" (watch) task
Completed in 0.064s at xxx - Waiting...

Reloading watch config...

Running "watch:live" (watch) task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch:live" (watch) task
Completed in 0.036s at XXX - Waiting...

Reloading watch config...

Running "watch:live" (watch) task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch:live" (watch) task
Completed in 0.097s at XXX - Waiting...

Reloading watch config...

Running "watch:live" (watch) task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch:live" (watch) task
Completed in 0.037s at XXX - Waiting...

Reloading watch config...

Running "watch:live" (watch) task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch:live" (watch) task
Completed in 0.042s at XXX - Waiting...

期待を裏切って、タスクの実行に時間がかかるようになってしまいました。

CPU 使用率も依然として 100% に達します。

home-spawn_false

100% の状態になっている時間が若干短くなった気がしなくもないですが、体感でも spawn:false にしたほうが遅いと分かりました。
これではダメです。

2-2. 職場

こっそり職場でも試してみました。

職場のマシンスペックは次の通りです。

work-mashine-spec

自宅のマシンとは比較にならないくらい高速です。

spawn:false なし（デフォルト）での watch タスクが出力したログです。

$ grunt
Running "connect:live" (connect) task
Started connect web server on http://localhost:9000

Running "watch:live" (watch) task
Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.001s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...
>> File "js\script.js" changed.
Completed in 0.000s at XXX - Waiting...

自宅同様、タスクの実行自体に時間はかかっていません。
CPU 使用率も上がりますが、全然ストレスは感じません。

work-spawn_defalut

次に spawn:false ありの watch タスクが出力したログです。

$ grunt
Running "connect:live" (connect) task
Started connect web server on http://localhost:9000

Running "watch:live" (watch) task
Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.028s at XXX - Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.027s at XXX - Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.033s at XXX - Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.031s at XXX - Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.040s at XXX - Waiting...
>> File "js\script.js" changed.

Running "watch:live" (watch) task
Completed in 0.033s at XXX - Waiting...

やはり、タスクの実行に時間がかかるようになりました。

CPU 使用率は、デフォルトの状態と変わりありません。

work-spawn_false

3. まとめ

spawn:false にすると改善したという記事をいくつも見かけたので試してみたのですが、結果は上記の通り期待を裏切ってくれました。

まだそれほど大量のファイルを watch させてないから逆にこのような結果になったのか、原因はちょっと分からないのですが、spawn:false では改善しないことは分かりました。

お手軽だったのに残念です。。。

次は時間をみつけて grunt-este-watch を試してみたいと思います。

4. その他の JavaScript に関する記事

その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください！

Googleアドセンス用（PC）

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

Googleアドセンス用（PC）

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


三 + 7 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

PREV
BOSE のスピーカー Companion2 Series III の購入を検討されている方に
NEXT
GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

Googleアドセンス用（PC）

サイト内検索

NEW ENTRY

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く（自分比）

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑