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());
});

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());
});

• javascript
• gulp

• Does having livereload on the server cause the whole thing to refresh? I haven't used it that way. – Evan Davis Commented Dec 21, 2014 at 17:11
• Without a refresh of livereload? – Preview Commented Dec 21, 2014 at 17:34
• I have indeed the livereload chrome extension. If I disable it, nothing happens! – Jeanluca Scaljeri Commented Dec 21, 2014 at 18:13
• Can you add your css setup? – Evan Davis Commented Dec 21, 2014 at 18:25
• THAT is simplified? I'd remend you test that a basic setup of writing a CSS file to the output and updating the stylesheet in the browser. Ain't nobody got time for that mess. – Evan Davis Commented Dec 21, 2014 at 18:34

3 Answers 3

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

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

you might need a chrome extension for gulp-livereload

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

I found it's uncontrolled to use embedded livereload support in gulp-connect.

So, i tried to make livereload work independently.

Just setup your gulp-connect config without livereload and call livereload.listen with specified host option(at most time it should be 'localhost'). Like

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

And then watch files you want to detect. Like

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's extension
  // gulp.start(['livereload']);
});