browserSync不能正常工作

我有这个代码重新加载浏览器的任何变化：

var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); 

我在这里触发browserSync，通过html.js：

 var gulp = require('gulp'); var browserSync = require('browser-sync'); var fileinclude = require('gulp-file-include'); var rename = require('gulp-rename'); var util = require('gulp-util'); gulp.task('html', function() { var filename = 'middle.html'; return gulp.src(filename) .pipe(fileinclude()) .pipe(rename('index.html')) .pipe(gulp.dest('./')) .pipe(browserSync.reload({stream:true})); }); 

出于某种原因，html.js似乎工作（文件包括，重命名等…完成），但browserSync没有。 我没有收到任何错误消息，但浏览器不会自动重新加载。 有任何想法吗？

谢谢！

Answer 1

下面的技术为我工作。

自动重新加载

• Html你应该使用browserSync.reload
• 和CSS使用browserSync.stream（） 。

 var gulp = require('gulp'); var sass = require('gulp-sass'); var watch = require('gulp-watch'); var browserSync = require('browser-sync').create(); // for live-editing gulp.task('default', function(){ // Serve files from the root of this project browserSync.init({ server: "./" }); gulp.watch('sass/**/*.scss', ['styles']); //-----***** RELOADING of HTML *****----- gulp.watch("*.html").on("change", browserSync.reload); }); gulp.task('styles', function(){ gulp.src('sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe( gulp.dest('./css')) //-----***** RELOADING of CSS *****----- .pipe(browserSync.stream()); }); 

Answer 2

所以，我不是100％确定，如果这是问题，但试试这个。 将浏览器同步任务添加到监视任务，以加载configuration。

 var gulp = require('gulp'); gulp.task('watch', ['browser-sync'], function() { // Add your browser-sync task to the watch task gulp.watch([ 'html/*' ], ['html']); gulp.watch([ '.html' ], ['html']); gulp.watch([ 'js/' ], ['html']); gulp.watch([ 'css/*' ], ['html']); gulp.watch([ 'css/*', ], ['sass']); }); 

然后修改您的浏览器同步configuration，将CSS更改注入浏览器：

 var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./", injectChanges: true // this is new } }); }); 

让我知道事情的后续。