Очень медленный запуск сервера BrowserSync с помощью Gulp

[ РЕДАКТ: решено!]

См. мой ответ ниже.

[ → Исходный вопрос следует < <]

Я использую BrowserSync в режиме сервера (используя встроенный статический сервер) с GulpJS в локальном проекте, и все, кажется, работает правильно, за исключением того, что сервер BrowserSync очень медленно запускается. Сама BrowserSync, похоже, инициализируется сразу после запуска Gulp, но для запуска сервера требуется около 4-5 минут (а иногда и больше) и для возврата URL-адресов доступа. В течение этого периода все продолжает выполняться, и BrowserSync отвечает на вызовы reload() и т.д., Но доступ недоступен через обычные URL-адреса (в этом случае localhost: 3000 и localhost: 3001). После того, как URL-адреса доступа будут возвращены, сервер, казалось бы, запущен, и обновленные страницы браузераSync работают нормально и на самом деле очень быстро.

Я пробовал несколько разных конфигураций моего gulpfile.js, пытаясь разными способами инициализировать BrowserSync, различные подходы к вызову методов stream() и reload() (включая попытку базового

Я использую 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);
})

Ответ 1

В учетной записи BrowserSync Twitter было указано, что я установил вариант "онлайн" в true, и... похоже, что он сработает!

Я установил его в init BrowserSync следующим образом:

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

... и задержка ушла!

Переходя по документам BrowserSync (http://www.browsersync.io/docs/options/#option-online), кажется, что установка онлайн-опции в true пропускает онлайн-проверку. Итак, я думаю, что проверка была каким-то образом причиной задержки? Это кажется странным для меня, но теперь он работает лучше.

Ответ 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.