browserSync not working
16,776
Below technique worked for me.
For Automatic Reloading of
- Html you should use browserSync.reload
- and for CSS use 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());
});
Author by
Chiqui Esteban
Updated on June 15, 2022Comments
-
Chiqui Esteban almost 2 years
I have this code to reload the browser with any change:
var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); });
I'm triggering browserSync here, through 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})); });
For some reason, html.js seems to work (fileinclude, rename, etc... is done) but browserSync doesn't. I don't get any error message, but the browser does not reload automatically. Any ideas?
Thanks!
-
Chiqui Esteban over 9 yearsStill nothing, but thank you very much for the help!
-
nils over 9 yearsLet us know if you find it out, I'm curious.