Help us understand the problem. What is going on with this article?

gulp watchでCPU使用率100超

More than 5 years have passed since last update.

gulp watchでCPU使用率100超

browser-syncを使ってLiveReloadをしていたところ、nodeプロセスのCPU使用率が異常に高く(100%超)なっていた。

※topで確認したところ

top.jpg

最初はbrowser-syncの問題?と思ったけど、よくよく見るとCPUを使っている犯人はwatchの方でした。
なんてことはない、watchの対象範囲が拡すぎるだけで、それはそうだよな、という話。

  • 修正前
gulpfile.js
gulp.task('default', ['browser-sync'], function() {
    gulp.watch(["./**/*"], ['bs-reload']);
});

のようにgulpfileの設定でwatch対象がルート以下全ファイルに。。
htmlもcssもjsも全て監視するのだからと、安易に全対象にしてしまうと、watchがきつくなります。(当然)

  • 修正後
gulpfile.js
gulp.task('default', ['browser-sync'], function() {
    gulp.watch(["./**/*.html", "./**/*.css", "./**/*.js"], ['bs-reload']);
});

watch interval

この問題で解決策探っていた時に見つけた情報ですが、gulp.watchのオプションにinterval
というオプションがあり、対象ファイルが多いときはこのintervalを指定することでCPU負荷を下げられるとのこと。

  • intervalオプション
gulpfile.js
gulp.task('default', ['browser-sync'], function() {
    gulp.watch(["./**/*.html", "./**/*.css", "./**/*.js"], {interval: 500} ,['bs-reload']);
});

constant CPU usage on watch #634 (GitHub)

  • 監視対象を限定していても対象ファイルが多い
  • マシンのスペックが低い

などの場合はこのintervalオプションを使うことでCPU使用量を抑えられそうです。
500ms程度のインターバルなら使用感はあまり変わらないのでCPU消費が気になるならデフォルトで指定していてもよいかもしれません。

問題から少し外れますが、gulpのwatch自体CPU消費が大きい点は問題として認識されているようで、現在対応中とのことのよう。

I'm merging all file watching related issues into one issue, since there is one solution. The next version of gaze is under development and we are waiting for it to come out before we can fix the following issues:

  • high cpu usage
  • doesnt catch new files
  • globs get matched even though it was a file change that shouldn't match it
  • new files arent watched stops on error (unrelated to gaze, but fixed already in gulp 4)

file watcher has problems #651 (GitHub)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away