browser-sync non aggiorna la pagina dopo le modifiche con Gulp

Question

Sono nuovo di Gulp e volevo sfruttare la sua compilazione scss automatica e la sincronizzazione del browser. Ma non riesco a farlo funzionare.

ho messo a nudo tutto verso il basso per lasciare solo il contenuto della esempio sul sito web Browsersync:

http://www.browsersync.io/docs/gulp/#gulp-sass-css

var gulp  = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var sass  = require('gulp-sass'); 

// Static Server + watching scss/html files 
gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: "./app" 
    }); 

    gulp.watch("app/scss/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 
}); 

// Compile sass into CSS & auto-inject into browsers 
gulp.task('sass', function() { 
    return gulp.src("app/scss/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('default', ['serve']); 

posso chiamare sorso servire. Il sito sta mostrando e ricevo un messaggio da Browsersync. Quando modifico l'HTML, la pagina viene ricaricata. Quando tuttavia modifico lo scss, posso vedere questo:

[BS] 1 file changed (test.css) 
[15:59:13] Finished 'sass' after 18 ms 

ma devo ricaricare manualmente. Cosa mi manca?

Answer 1

Si può solo iniettare i cambiamenti, invece di dover forzare un aggiornamento del browser completo su SASS compilazione, se volete.

browserSync.init({ 
    injectChanges: true, 
    server: "./app" 
}); 

gulp.task('sass', function() { 
    return gulp.src("app/scss/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream({match: '**/*.css'})); 
}); 

Answer 2

Questo perché si chiama browserSync.reload sull'orologio html e non sull'orologio scss.

Prova questo:

gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload); 
gulp.watch("app/*.html").on('change', browserSync.reload); 

Answer 3

Questo è quello che io uso e il lavoro di essa bene in sass o qualsiasi altro file

gulp.task('browser-sync', function() { 
    var files = [ 
     '*.html', 
     'css/**/*.css', 
     'js/**/*.js', 
     'sass/**/*.scss' 
    ]; 

    browserSync.init(files, { 
     server: { 
     baseDir: './' 
     } 
    }); 
}); 

Answer 4

includo questo sul mio html, proprio sotto il tag body. Funziona.

<script type='text/javascript' id="__bs_script__">//<![CDATA[ 
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]> 
</script> 

Answer 5

imbattuto in questo stesso problema cercando di ricaricare php e js file e lo streaming di file css. Sono stato in grado di utilizzare lo streaming solo utilizzando un metodo pipe, il che ha senso. Ad ogni modo, ecco cosa ha funzionato per me:

gulp.watch(['./**/*.css']).on('change', function (e) { 
    return gulp.src(e.path) 
     .pipe(browserSync.stream()); 
}); 

Ma, io in realtà preferisco @ risposta di pixie modificata:

gulp.task('default', function() { 
    var files = [ 
      './**/*' 
     ]; 
    browserSync.init({ 
     files : files, 
     proxy : 'localhost', 
     watchOptions : { 
      ignored : 'node_modules/*', 
      ignoreInitial : true 
     } 
    }); 
}); 

Answer 6

Ho anche avuto lo stesso problema. Ha funzionato quando ho chiamato il metodo di ricarica come attività separata. corpo

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

gulp.task('reload', function(){ 
    browserSync.reload() 
}) 

gulp.task('watch', ['sass', 'css', 'browserSync'], function(){ 
    gulp.watch('*.html', ['reload']); 
}) 

Answer 7

Ho anche affrontato un problema simile quando ero una novità per l'utilizzo del browser-sync, la linea di comando stava dicendo "ricaricare i browser", ma il browser non è stata aggiornata a tutti, il problema era che avevo non incluso tag nella mia pagina HTML in cui la sincronizzazione del browser può iniettare script per la sua funzionalità, assicurati che la tua pagina HTML abbia il tag del corpo.