Gulp browser-sync funziona solo una volta

Question

Sto provando Gulp su uno dei miei progetti e volevo eseguirlo come un tempo con Grunt. Significa che deve guardare meno file e file js, sfilacciare, unire, compilare e aggiornare il browser una volta fatto tutto ciò.

Sono riuscito a farlo funzionare con gulp-browser-sync ma per qualche motivo funziona solo una volta. Apporto una modifica al mio file .less e il browser si ricarica. Quindi, una seconda modifica, viene compilata ma non si verifica alcuna ricarica.

Ecco il log:

[BS] Serving files from: ./ 
[09:47:26] Starting 'css-clean'... 
[09:47:26] Finished 'css-clean' after 16 ms 
[09:47:26] Starting 'styles'... 
[BS] 1 file changed (styles.min.css) 
[09:47:27] Finished 'styles' after 624 ms 
[09:47:27] Starting 'styles-watch'... 
[BS] Reloading Browsers... 

E quando mi ha colpito salvare una seconda volta:

[09:47:31] Starting 'css-clean'... 
[09:47:31] Finished 'css-clean' after 3.39 ms 
[09:47:31] Starting 'styles'... 
[BS] 1 file changed (styles.min.css) 
[09:47:32] Finished 'styles' after 362 ms 

Per quanto riguarda la JS, funziona tutto il tempo. Nessun problema, anche dopo che l'attività degli stili è stata completata, le modifiche JS stanno ancora attivando il ricaricamento corretto. In realtà sono solo gli stili che hanno problemi.

Ecco il gulpfile.js

var gulp = require('gulp'), 
    autoprefixer = require('gulp-autoprefixer'), 
    less = require('gulp-less'), 
    minifycss = require('gulp-minify-css'), 
    concat = require('gulp-concat'), 
    jshint = require('gulp-jshint'), 
    uglify = require('gulp-uglify'), 
    rename = require('gulp-rename'), 
    notify = require('gulp-notify'), 
    path = require('path'), 
    streamqueue = require('streamqueue'), 
    clean = require('gulp-clean'), 
    browserSync = require('browser-sync').create(), 
    reload = browserSync.reload; 


// Clean the CSS folder 
gulp.task('css-clean', function() { 
    return gulp.src(['dist/css'], {read: false}) 
     .pipe(clean()); 
}); 

// Clean the CSS folder 
gulp.task('js-clean', function() { 
    return gulp.src(['dist/js'], {read: false}) 
     .pipe(clean()); 
}); 


// Generate the CSS styles, clean before hand 
gulp.task('styles', ['css-clean'], function() { 
    return streamqueue({ objectMode: true }, 
      gulp.src(['./bower_components/uikit/less/uikit.less']), 
      gulp.src(['./src/less/main.less']) 
     ) 
    .pipe(concat('styles.less')) 
    .pipe(less({ 
     paths: [ path.join(__dirname, 'less', 'includes') ] 
    })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('dist/css')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(minifycss()) 
    .pipe(gulp.dest('dist/css')) 
    .pipe(browserSync.reload({stream:true})); 
}); 

// create a task that ensures the `styles` task is complete before 
// reloading browsers 
gulp.task('styles-watch', ['styles'], browserSync.reload); 



// Lint Task 
gulp.task('lint', function() { 
    return gulp.src('src/js/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('default')); 
}); 


// Generate the scripts, clean before hand 
gulp.task('scripts', ['js-clean', 'lint'], function() { 
    return streamqueue({ objectMode: true }, 
      gulp.src(['./bower_components/jquery/dist/jquery.js']), 
      gulp.src(['./bower_components/modernizer/modernizr.js']), 
      gulp.src(['./bower_components/uikit/js/uikit.js']), 
      gulp.src(['./src/js/plugin.js']), 
      gulp.src(['./src/js/main.js']) 
     ) 
    .pipe(concat('scripts.js')) 
    .pipe(gulp.dest('dist/js')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/js')) 
    .pipe(browserSync.reload({stream:true})); 
}); 

// create a task that ensures the `scripts` task is complete before 
// reloading browsers 
gulp.task('scripts-watch', ['scripts'], browserSync.reload); 


// Lint Task 
gulp.task('alldone', ['scripts'], function() { 
    return gulp.src('src/js/*.js') 
       .pipe(notify({ message: 'Gulp tasks are completed!!' })); 
}); 


// Static server 
gulp.task('browsersync', function() { 
    browserSync.init({ 
     server: { 
      baseDir: "./" 
     } 
    }); 

    gulp.watch("src/less/*.less", ['styles-watch']); 
    gulp.watch('src/js/*.js', ['lint', 'scripts-watch']); 
    gulp.watch("*.html").on('change', reload); 
}); 


// Default Task 
gulp.task('default', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']); 

// Build Task 
gulp.task('build', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']); 

Grazie per il vostro aiuto!

Answer 1

Sei sicuro che il CSS non sia cambiato nel browser? I nuovi stili vengono caricati senza richiedere di ricaricare la pagina. Almeno questo è ciò che sta facendo il mio setup di gulp.

Provare a modificare il file .less e vedere se la modifica è effettivamente visibile nel browser.

Answer 2

ne dite di usare direttamente

.pipe(browserSync.stream()) 

una volta ho avuto lo stesso problema durante la modifica dei file '.jade' che solo una volta ricaricato. Poi ho avvolto browserSync.reload in una funzione anonima come

gulp.task('templates-watch', ['templates'], function() { 
    browserSync.reload(); 
}); 

Funziona per me. Non so se c'è qualcosa di speciale su browserSync.reload. Che ne dici di provare. :)

Answer 3

La mia situazione è un po 'diversa, ma potrebbe essere abbastanza simile da essere utile a te o qualcun altro. Ho impostato gulp + browserSync in questo modo:

.task('serve', ['clean', 'lint', 'sass', 'js', 'server'], function() { 
    return gulp.watch([paths.js, paths.html, paths.sass], 
    ['lint', 'sass', 'js', browserSync.reload]); 
}) 

Questo si avvia e apre la pagina una volta. Se ho apportato una modifica alla pagina HTML e salvata, potrei vedere lint, sass, js e browserSync.reload eseguire, ma il browser non si è aggiornato. Il mio HTML era molto semplice; questo:

<!doctype html> 
<html> 
TEST 
</html> 

ho cambiato il codice HTML a questo fine e ha iniziato a lavorare:

<!doctype html> 
<html> 
<head> 
    <title>TEST</title> 
</head> 
<body> 
HELLO-TEST 
</body> 
</html> 

Answer 4

per me in Gulp 4, la funzione anonima non ha risolto il problema, Quello che ho fatto è stato avvolgere il browserSync.reload() in una funzione di callback con un fatto:

function reload(done) { 
    browserSync.reload(); 
    done(); 
} 

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts, reload));