非常慢的浏览器同步服务器启动吞咽

I'm using BrowserSync in server mode (using its built-in static server) with GulpJS on a local project, and everything seems to be working correctly except that the BrowserSync server is very slow to startup. BrowserSync itself seems to initialize right away when I run Gulp, but it takes about 4 to 5 minutes (and occasionally more) for the server to start and for it to return the access URLs. During this period, everything continues to run and BrowserSync responds to reload() calls and such, but access is not available via the usual URLs (in this case, localhost:3000 and localhost:3001). Once the access URLs are returned, the server has seemingly started and BrowserSync's page refreshes work fine and are actually very speedy.

我在服务器模式(使用内置的静态服务器)中使用BrowserSync，在本地项目中使用GulpJS，除了BrowserSync服务器启动非常慢之外，所有的东西都运行正常。当我运行Gulp时，BrowserSync本身似乎可以立即初始化，但是服务器启动和返回访问url需要大约4到5分钟(有时更多)。在此期间，一切都继续运行，BrowserSync响应reload()调用，但是访问不能通过通常的url(在本例中，localhost:3000和localhost:3001)进行。一旦访问url被返回，服务器似乎已经启动，BrowserSync的页面刷新工作良好，而且速度非常快。

I have tried several different configurations of my gulpfile.js, trying different ways to initialize BrowserSync, different approaches to calling the stream() and reload() methods (including trying BrowserSync's basic Gulp/SASS "recipe"), and different port numbers, but all configurations had the same problem. I even tried disabling my firewall and AV software (Avast), but nothing.

我尝试了几种不同的gulpfile配置。js尝试了不同的方式来初始化BrowserSync、调用stream()和reload()方法(包括尝试BrowserSync的基本Gulp/SASS“recipe”)以及不同的端口号，但是所有的配置都有相同的问题。我甚至尝试禁用我的防火墙和AV软件(Avast)，但什么都没有。

I'm running Windows 8.1, if that's relevant. BrowserSync is freshly installed locally to the project via NPM, and fresh local installs to other directories have the same problem. NPM, Ruby, Gulp, and all modules seem to be up-to-date. For what it's worth, all of my other experience with Ruby, Gulp, and Node.js have been very smooth and problem-free.

我在运行Windows 8.1，如果相关的话。BrowserSync是通过NPM在本地新安装的，其他目录的本地安装也有同样的问题。NPM、Ruby、Gulp和所有模块似乎都是最新的。不管怎样，我在Ruby、Gulp和Node上的所有其他经验都是有价值的。js一直都很流畅，没有问题。

I can't find any other posts mentioning this problem and am beginning to think this is normal behavior. Is this normal, and, if not, does anyone have any ideas of things to try? This delay is not the end of the world since the BrowserSync server does always start (eventually), but it's still a kink in my workflow that I'd rather fix than just deal with.

我找不到任何其他的帖子提及这个问题，并且开始认为这是正常的行为。这是正常的吗?如果不是，有没有人有什么想法可以尝试?这种延迟并不是世界末日，因为BrowserSync服务器总是(最终)启动，但它仍然是我的工作流中的一个问题，我宁愿修复它，而不是只处理它。

Finally, here is my gulpfile.js: /* File: gulpfile.js */

最后，这是我的gulpfile。js:/ *文件:gulpfile。js * /

var gulp  = require('gulp'),
    gutil = require('gulp-util');
    jshint = require('gulp-jshint');
    sass   = require('gulp-sass');
    concat = require('gulp-concat');
    uglify = require('gulp-uglify');
    sourcemaps = require('gulp-sourcemaps');
    imagemin = require('gulp-imagemin');
    browserSync = require('browser-sync').create();

gulp.task('default', ['watch'], browserSync.reload);

// JSHint
gulp.task('jshint', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// Build JS
gulp.task('build-js', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('main.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/www/js/core'));
});

// Build CSS
gulp.task('build-css', function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(sourcemaps.init())
            .pipe(sass()).on('error', handleError)
        .pipe(sourcemaps.write()) // Add the map to modified source.
        .pipe(gulp.dest('public/www/css/core'))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

// ImageMin
gulp.task('imagemin', function () {
    return gulp.src('src/img/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}]
        }))
        .pipe(gulp.dest('public/www/img'));
});

// Handle errors
function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

// Watch function
gulp.task('watch', function() {
    browserSync.init({
      server: "./public/www",
      //port: 3002
    });

    gulp.watch('src/js/**/*.js', ['jshint']);
    gulp.watch('src/sass/**/*.{sass,scss}', ['build-css']);
    gulp.watch('src/js/**/*.js', ['build-js']);
    gulp.watch('src/img/*', ['imagemin']);
    gulp.watch("public/www/css/**/*.css").on('change', browserSync.reload);
})

2 个解决方案

#1

The BrowserSync Twitter account suggested that I set the "online" option to true, and...it seems to have worked!

BrowserSync Twitter账户建议我将“online”选项设为true，然后……这似乎奏效了!

I set it in BrowserSync's init like so:

我在BrowserSync的init中设置为:

browserSync.init({
  server: "./public/www",
  online: true
});

...and the delay is gone!

…延迟已经过去了!

Going by the BrowserSync docs ( http://www.browsersync.io/docs/options/#option-online ), it seems that setting the online option to true skips the online check. So, I guess that check was somehow what was causing the delay? That seems odd to me, but it's working better now.

通过浏览BrowserSync docs文档(http://www.browsersync.io/docs/options/# options -online)，似乎将online选项设置为true会跳过在线检查。所以，我猜是支票导致了延迟?这在我看来似乎很奇怪，但现在效果更好了。

#2

In my case I had this code in gulpfile which delay startup about 50 seconds

在我的例子中，我在gulpfile中有这个代码，它会延迟启动大约50秒

gulp.watch('./**/*.{js,html}').on('change', browserSync.reload);

and the problem was in the glob string. It inspects even node_modules folder. And I did some changes

问题出在球线上。它检查甚至node_modules文件夹。我做了一些改变

gulp.watch(['./scripts/**/*.{js,html}', './index.html'])
  .on('change', browserSync.reload);

I think that it is performance feature, that we should more exactly specify glob.

我认为这是性能特性，我们应该更准确地指定glob。

#1