Browser-sync: Extreme High CPU Usage

[NgYueHong]

I am using Windows 7 64bit on AMD Phenom II X4 955 Processor PC and I try to run browser-sync using gulp.

    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "public"
        },
        files: "public/**",
        notify: false,
        browser: "chrome"
    });
    });

The problem is as soon as i run browser-sync, I see high CPU usage of about 60-70% on all 4 cores of CPU on node.exe all time. Do you experience such problem as well? Why is it run at such a high usage? Is there anyway to reduce it?

[HugoHeneault]

I have the same issue. Using browser-sync 1.8.0 with Grunt.
My problem seems to appen after a little while...

[shakyShane]

Why is it run at such a high usage? Is there anyway to reduce it?

Yeah, you need to be more specific with your file-watching. Instead of "public/**" try narrowing it down and exclude all vendor directories (such as bower_components, etc)

browserSync({
        server: {
            baseDir: "public"
        },
        files: ["public/js/*.js", "public/css/*.css"],
        notify: false,
        browser: "chrome"
    });

etc, etc.

[shakyShane]

Please upgrade to [email protected] and test again, I think you'll find this is fixed now :)

[HugoHeneault]

Could you please provide an update for grunt-browser-sync so I can test?
Thanks a lot for your great work. ;)

[shakyShane]

npm rm grunt-browser-sync && npm install grunt-browser-sync

... will give you latest version

[HugoHeneault]

Awesome. I don't hear my CPU anymore. :relaxed:

[addyosmani]

@sgomes and I ran into this issue when using BrowserSync on some recent projects today. 2.2.3 fixed it right up! :) Thanks @shakyShane!

[shakyShane]

@addyosmani - not a problem, enjoy :)

[richard-flosi]

I'm having high CPU usage with browser-sync 2.6.5
Should improving the file-watching glob help? Anything else?
Seems so. If I stop watching files all together the CPU drops.

Just this 1 watch rule which I tried to make more specific uses 30-40% of the CPU:

    gulp.watch([
        'assets/scss/*.scss',
        'assets/scss/base/*.scss',
        'assets/scss/modules/*.scss',
        'assets/scss/utilities/*.scss',
        ], ['css']);

[shakyShane]

@richard-flosi - remove Browsersync, still get the high usage?

I ask because your example has nothing to do with Browsersync

[richard-flosi]

@shakyShane oh, you're right. :( Seems to be a gulp.watch issue.

I was able to knock the CPU time down by tweaking some options to watch:

gulp.watch([
    'assets/scss/*.scss',
    'assets/scss/base/*.scss',
    'assets/scss/modules/*.scss',
    'assets/scss/utilities/*.scss',
    ], {
        interval: 1000, // default 100
        debounceDelay: 500, // default 500
        mode: 'poll'
    },
    ['css']);

In case anyone else ends up here.

Thanks! And sorry! :)

Here's a link to a similar gulp.watch issue: https://github.com/gulpjs/gulp/issues/634

[billcolumbia]

Hmmm. I'm having this issue now just started up this week.

I'm running MAMP and proxying. When I comment out browsersync.init() none of these httpd processes spike anymore. Tried some of the solutions above. Here's some of my gulpfile.js

"browser-sync": "2.6.5",
"gulp": "3.8.11",

gulp.task('serve', function() {
  browserSync.init({
    proxy: 'http://directory.app',
    ghostMode: false,
    open: false,
    notify: false
  });

  gulp.watch(['styles/*.scss', 'styles/**/*.scss'], {
    interval: 1000, // default 100
    debounceDelay: 1000, // default 500
    mode: 'poll'
  }, ['sass']);

  gulp.watch(['scripts/*.js','scripts/**/*.js'], {
    interval: 1000, // default 100
    debounceDelay: 1000, // default 500
    mode: 'poll'
  }, ['browserify']);
});

[shakyShane]

@billcolumbia what happens if you run just Browsersync without those watchers?

[billcolumbia]

@shakyShane Still spikes way back up after about 1 min running. I did notice that if I run with MAMP off, or if I just hit the directory.app without gulp running, it never spikes. :grimacing:

[almone]

I also faced with high CPU usage problem when tried to watch all my project files like so: gulp.watch('**/*.*', ['js']); – dont use this!
So the solution for me was to only watch the files that are changed regularly.
Thanks to @christianv http://denbuzze.com/post/5-lessons-learned-using-gulpjs/

[nilsborg]

@shakyShane thanks for the tip, I was accidentally watching my whole node-module directory -.-
CPU's down to pure boredome now :)