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

Question

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

Does having `livereload` on the server cause the whole thing to refresh? I haven't used it that way. — Evan Davis, Dec 21 '14 at 17:11
I have indeed the `livereload` chrome extension. If I disable it, nothing happens! — Jeanluca Scaljeri, Dec 21 '14 at 18:13
THAT is _simplified_? I'd recommend 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, Dec 21 '14 at 18:34

score 5 · Accepted Answer · answered Dec 21 '14 at 21:01

5

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

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

answered Dec 21 '14 at 21:01

user3995789

3,452
1
19
35

I actually need to do a refresh too if specific files change. Any suggestions how to force a refresh instead ? – Jeanluca Scaljeri Dec 21 '14 at 21:39
@JeanlucaScaljeri this will reload the page, what do you think this does? – user3995789 Dec 21 '14 at 21:41
No it doesn't. It only updates the css. Things like dom structure, javascript instances are not refreshed. – Jeanluca Scaljeri Dec 21 '14 at 22:04
2

Oh, I don't know maybe try `livereload()`. why would you need a full refresh anyway, it wouldn't make a difference. @JeanlucaScaljeri – user3995789 Dec 21 '14 at 22:12
`livereload()` did the trick!! Thanks a lot! CSS changes can be applied without refresh, however for html or javascript changes you have to refresh. However, I have a situation in which I have to refresh if a specific css file changes :( – Jeanluca Scaljeri Dec 22 '14 at 08:42

score 1 · Answer 2 · answered Dec 21 '14 at 17:56

1

you might need a chrome extension for gulp-livereload

answered Dec 21 '14 at 17:56

hjl

2,794
3
18
26

score 1 · Answer 3 · answered Apr 28 '16 at 09:46

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']);
});

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

3 Answers3

Linked