Reputation: 2745
When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Upvotes: 3
Views: 4176
Reputation: 222
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload
Upvotes: 1
Reputation: 11
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream()
.
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true})
instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Upvotes: 1