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

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"配方")和不同的端口号,但所有配置都有同样的问题.我甚至试过禁用我的防火墙和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),似乎将在线选项设置为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.