Gulp: how to update the browser without updating (only for css changes)

Question

I have setup gulp so rebooting the browser when making changes. However, for css changes, I want the browser to update without updating, but I'm not sure how to do this. For my current setup, I 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 I need to change, so css updates happen without updating?

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 1

You need to call livereload.changed(files) when the change happens. For this, see gulp -watch doc .

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

Answer 2

you may need a chrome extension for gulp -livereload

Answer 3

I had the same problem with you, I solved it.

I found it uncontrollable to use the built-in livereload in gulp -connect.

So, I tried to do the work with the liver myself.

Just configure gulp -connect without reloading it and call the livereload.listen function with the specified host option (in most cases this should be "localhost"). how

 livereload.listen({ host: 'localhost' }); 

And then look at the files you want to discover. how

 var changedFile = null; gulp.task("livereload", function(cb){ return gulp.src(changedFile) .pipe(plumber()) .pipe(livereload()); }); gulp.watch(['*.css']).on('change', function(file) { changedFile = file.path; // run specific task according to the given file extension // gulp.start(['livereload']); });