Jeanluca Scaljeri Jeanluca Scaljeri - 7 months ago 64
Javascript Question

gulp: how to update the browser without refresh (for css changes only)

I've setup gulp such that the browser reloads when I make changes. However, for css changes I want the browser to update without refresh, but I'm not sure how to do this. For my current setup I've used this tutorial:

var debug = require('gulp-debug'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload');

gulp.task('webserver', function () {
connect.server({
livereload: true,
root: ['demo/']
});
});

gulp.task('livereload', function () {
gulp.src(['index.html', 'resources/**/*.js'])
.pipe(watch(['resources/**/*.html', 'index.html']))
//.pipe(debug({verbose: true}))
.pipe(connect.reload());
});

gulp.task('watch', function () {
livereload.listen();
gulp.watch('resources/**/*.scss', ['css']);
});


In my css task I also call

.pipe(livereload());


Any suggestions what I need to modify so css updates happen without a refresh ?

UPDATE: Here is my css task (a bit simplified):

gulp.task('css', function () {
...
return gulp.src('demo.scss')
.pipe($.sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./target/')
.pipe(livereload());
});

Answer

You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc.

watch('**/*.js', function (files) {
  livereload.changed(files)
});
Comments