使用 Gulp 启动非常慢的 BrowserSync 服务器

Question

我在本地项目中使用带有 GulpJS 的服务器模式下的 BrowserSync（使用其内置的静态服务器），除了 BrowserSync 服务器启动速度非常慢之外，一切似乎都正常工作。当我运行 Gulp 时，BrowserSync 本身似乎会立即初始化，但服务器启动并返回访问 URL 大约需要 4 到 5 分钟（有时甚至更长时间）。在此期间，一切都会继续运行，BrowserSync 会响应 reload() 调用等，但无法通过通常的 URL（在本例中为 localhost:3000 和 localhost:3001）进行访问。返回访问 URL 后，服务器似乎已启动，BrowserSync 的页面刷新工作正常，实际上非常快。

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

如果相关，我正在运行 Windows 8.1。 BrowserSync 是通过 NPM 新安装到项目的本地，新本地安装到其他目​​录也有同样的问题。 NPM、Ruby、Gulp 和所有模块似乎都是最新的。值得一提的是，我在 Ruby、Gulp 和 Node.js 方面的所有其他体验都非常顺利且没有问题。

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

最后，这是我的 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);
})

Answer 1

BrowserSync Twitter 帐户建议我将“在线”选项设置为 true，并且……它似乎奏效了！

我在 BrowserSync 的 init 中这样设置它：

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

...延迟消失了！

按照 BrowserSync 文档 (http://www.browsersync.io/docs/options/#option-online)，似乎将 online 选项设置为 true 会跳过在线检查。所以，我猜这个检查是导致延迟的原因？这对我来说似乎很奇怪，但现在效果更好了。

Answer 2

就我而言，我在 gulpfile 中有这段代码，它会延迟启动大约 50 秒

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

问题出在 glob 字符串中。它甚至检查 node_modules 文件夹。我做了一些改变

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

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