[EDIT: risolto!]Avvio server BrowserSync molto lento con Gulp
Vedere la mia risposta qui sotto.
[>>domanda iniziale segue < <]
sto usando BrowserSync in modalità server (utilizzando la sua built-in server statico) con GulpJS su un progetto locale, e tutto sembra funzionare correttamente ad eccezione del fatto che il server BrowserSync è molto lento all'avvio. Sembra che lo stesso BrowserSync si inizializzi immediatamente quando eseguo Gulp, ma per il server sono necessari da 4 a 5 minuti (e talvolta anche di più) per restituire gli URL di accesso. Durante questo periodo, tutto continua a funzionare e BrowserSync risponde alle chiamate reload() e simili, ma l'accesso non è disponibile tramite i normali URL (in questo caso, localhost: 3000 e localhost: 3001). Una volta che gli URL di accesso sono stati restituiti, il server è apparentemente avviato e la pagina di BrowserSync si aggiorna correttamente e in effetti è molto veloce.
Ho provato diverse configurazioni del mio gulpfile.js, provando diversi modi per inizializzare BrowserSync, diversi approcci per chiamare i metodi stream() e reload() (incluso provare la "ricetta" di base di Gulp/SASS di BrowserSync), e numeri di porta diversi, ma tutte le configurazioni avevano lo stesso problema. Ho persino provato a disabilitare il mio firewall e il software AV (Avast), ma niente.
Sto utilizzando Windows 8.1, se pertinente. BrowserSync è appena installato localmente nel progetto tramite NPM e le nuove installazioni locali in altre directory hanno lo stesso problema. NPM, Ruby, Gulp e tutti i moduli sembrano essere aggiornati. Per quello che vale, tutta la mia altra esperienza con Ruby, Gulp e Node.js è stata molto fluida e senza problemi.
Non riesco a trovare altri post che menzionino questo problema e sto iniziando a pensare che si tratti di un comportamento normale. È normale e, se no, qualcuno ha qualche idea di cose da provare? Questo ritardo non è la fine del mondo dal momento che il server BrowserSync inizia sempre (eventualmente), ma è comunque un nodo nel mio flusso di lavoro che preferirei risolvere piuttosto che occuparmi solo di.
Infine, ecco la mia gulpfile.js: /file *: 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);
})