Bardzo wolne uruchamianie serwera BrowserSync za pomocą Gulp

Question

[EDYCJA: rozwiązany!]

Zobacz poniżej odpowiedź.

[>>pytanie Original następująco < <]

używam BrowserSync w trybie serwera (przy użyciu wbudowanego w serwerze statyczne) z GulpJS na lokalnym projekcie, a wszystko wydaje się działać poprawnie z tym wyjątkiem, że serwer BrowserSync uruchamia się bardzo wolno. Sam BrowserSync wydaje się inicjować natychmiast po uruchomieniu Gulp, ale zajmuje to około 4 do 5 minut (i czasami więcej), aby serwer mógł uruchomić i zwrócić adresy dostępu. W tym czasie wszystko działa, a przeglądarka BrowserSync reaguje na ponowne ładowanie() i takie, ale dostęp nie jest możliwy za pośrednictwem zwykłych adresów URL (w tym przypadku localhost: 3000 i localhost: 3001). Po zwróceniu URLów dostępu serwer wydaje się być uruchomiony, a odświeżanie strony BrowserSync działa poprawnie i jest bardzo szybkie.

Próbowałem różnych konfiguracji mojego pliku gulpfile.js, próbując różnych sposobów inicjalizacji BrowserSync, różnych metod wywoływania metod stream() i reload() (w tym wypróbowania "przepisu" GALP/SASS BrowserSync), oraz różne numery portów, ale wszystkie konfiguracje miały ten sam problem. Próbowałem nawet wyłączyć moją zaporę ogniową i oprogramowanie AV (Avast), ale nic.

Używam systemu Windows 8.1, jeśli jest to istotne. BrowserSync jest świeżo zainstalowana lokalnie w projekcie za pośrednictwem NPM, a nowe lokalne instalacje do innych katalogów mają ten sam problem. NPM, Ruby, Gulp i wszystkie moduły wydają się być aktualne. Co jest warte, wszystkie moje inne doświadczenia z Ruby, Gulp i Node.js były bardzo płynne i bezproblemowe.

Nie mogę znaleźć żadnych innych postów wspominających o tym problemie i zaczynam myśleć, że to normalne zachowanie. Czy to normalne, a jeśli nie, to czy ktoś ma jakieś pomysły na wypróbowanie? To opóźnienie nie jest końcem świata, ponieważ serwer BrowserSync zawsze się uruchamia (ostatecznie), ale nadal jest to załamanie w moim przepływie pracy, które wolałbym naprawić, niż radzić sobie z nim.

Wreszcie, tutaj jest moje gulpfile.js: /* Plik: 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

Konto BrowserSync Twitter zasugerował, że mogę ustawić opcję "online" na true, a ... wydaje się, że zadziałało!

ustawić go w init BrowserSync jest tak:

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

... a opóźnienie nie ma!

Przechodząc przez dokumentację przeglądarki BrowserSync (http://www.browsersync.io/docs/options/#option-online), wydaje się, że ustawienie opcji online na wartość true powoduje pominięcie sprawdzania online. Sądzę więc, że czek był jakoś przyczyną opóźnienia? Wydaje mi się to dziwne, ale teraz działa lepiej.

Answer 2

W moim przypadku miałem ten kod w gulpfile których opóźnienie uruchomienia około 50 sekund

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

a problem był w ciągu glob. Sprawdza nawet folder node_modules.I zrobiłem kilka zmian

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

Myślę, że to funkcja wydajności, że powinniśmy bardziej dokładnie określić glob.