浏览器同步服务器与Gulp非常缓慢的启动

[ 编辑:解决! ]

看到我的答案在下面。

[ 原创问题如下 <<]

我在本地项目中使用GulpJS的服务器模式(使用内置的静态服务器)BrowserSync,似乎一切正常,除了BrowserSync服务器启动速度非常慢。 当我运行Gulp时,BrowserSync本身似乎马上被初始化,但服务器启动并需要大约4到5分钟(偶尔更多)才能返回访问URL。 在此期间,一切都会继续运行,BrowserSync会响应reload()调用等,但通过常规URL(本例中为localhost:3000和localhost:3001)不能访问。 一旦访问URL被返回,服务器似乎已经启动,BrowserSync的页面刷新工作正常,实际上非常快。

我已经尝试了几个不同的configuration我的gulpfile.js,尝试不同的方式来初始化BrowserSync,不同的方法来调用stream()和reload()方法(包括尝试BrowserSync的基本Gulp / SASS“食谱”)和不同的端口号,但所有configuration都有同样的问题。 我什至尝试禁用我的防火墙和AV软件(Avast),但没有。

我正在运行Windows 8.1,如果这是相关的。 BrowserSync是通过NPM本地新安装到项目中的,本地新安装到其他目​​录也有同样的问题。 NPM,Ruby,Gulp和所有模块似乎都是最新的。 对于它的价值,我所有使用Ruby,Gulp和Node.js的经验都非常stream畅,没有任何问题。

我找不到任何其他的post提到这个问题,我开始认为这是正常的行为。 这是正常的,如果没有,有没有人有任何想法的事情要尝试? 由于BrowserSync服务器总是启动(最终),所以这个延迟并不是世界末日,但是在我的工作stream程中,这仍然是我不想处理的问题。

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

BrowserSync Twitter帐户build议我将“在线”选项设置为true,并且…似乎已经奏效!

我把它设置在BrowserSync的init中,像这样:

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

…延迟消失了!

通过BrowserSync文档( http://www.browsersync.io/docs/options/#option-online ),似乎将在线选项设置为true会跳过在线检查。 那么,我想这个检查是不知何故造成了延误? 这对我来说似乎很奇怪,但现在工作进展得很好。

在我的情况下,我有这个代码在大约50秒延迟启动gulpfile

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

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

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

我认为这是性能特征,我们应该更精确地指定glob。