Question

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

我尝试了几种不同的gulpfile.js配置，尝试了不同的方法初始化BrowserSync，调用stream（）和reload（）方法的不同方法（包括尝试BrowserSync的基本Gulp / SASS＆＃34） ; recipe＆＃34;）和不同的端口号，但所有配置都有相同的问题。我甚至试图禁用我的防火墙和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帐户建议我设置＆＃34; online＆＃34;选项为true，并且...它似乎有效！

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

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

......延迟消失了！

通过BrowserSync文档（http://www.browsersync.io/docs/options/#option-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。

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

2 个答案: