Learning Gulp #8 - LiveReload With Gulp

Here we show you how to trigger LiveReload with Gulp.

Subscribe to Level Up Pro for extra features!

Subscribe to the Level Up Newsletter

For questions post in the comments or visit:

To Support Level Up Tuts:

Simple cloud hosting, built for developers.:

[mfsc-]

i recommend another page auto reload app called browser-sync
could be run in standalone or run with gulp-browser-sync.
The goods with it is browser doesn't require to install any plugin.
Such that, it also work with IE and browsers in mobile device

[ludopoot]

I followed along, but *var server = livereload();* does not work for me. I used *livereload.listen();* instead. Now it works nicely, why is this?

[Ecdetails]

had issues with the livereload vs var livereload(); under watch livereload.listen(); worked great

[petrovski]

Great video, thanks! But since version 4 of gulp, the syntax "gulp.task(function(){ // code });" returns error if doesn't have the async completion. Please, do another video teaching how to do live reload for Gulp 4 releases!

[BrandonOsborn]

You're using a bunch of boilerplate html, etc., but I can't figure out where you got it, or where you put it so the server can find it. Did I miss something?

[batteryfarmfilms]

Seems that need to replace

var server = livereload();

with

livereload.listen();

[anythingforweb]

Does LiveReload have css injection, or is just doing a full page refresh?

[mayankvora]

1) Live reload for me was not working.. Then I modified the code as shown in video
In watch task instead of livereload() use livereload.listen().

2) You can enable Livereload in incognito by navigating to “More Tools”, clicking “Extensions”, and then checking the box to allow it in incognito mode

3) Now start the incognito window in chrome and press the live reload plugin to start it and then start your application server. It will now live reload the changes whenever there are any change in less file.

[quixoticfallcy]

Do you have the github repo for this? livereload is not working for me after following whatever you did. Thanks

[andrewjones]

This isn't working for me. I get to the 4min mark in the video then I run into an issue basically I dont get that message. I also followed the livereload github page along with this video as the syntax are wrong.

[pakpoomtivarkornkit]

.pipe(sass({output: 'compressed'})) should be .pipe(sass({outputStyle: 'compressed'}))

[joxmar]

Compared to the previous videos this time you didn't installed the liveReload package with --save-dev included. Ins't really necessary for this one to have it?

[screwfeaar]

put below line to get ride of extension

[haopeiyang]

I got this error while clicking the Livereload icon on Chrome:

"Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running."