Jeanluca Scaljeri Jeanluca Scaljeri - 2 years ago 198
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 () {
livereload: true,
root: ['demo/']

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

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

In my css task I also call


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')
errLogToConsole: true

Answer Source

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

watch('**/*.js', function (files) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download