Gulp Livereload in Chrome Gulp Livereload in Chrome google-chrome google-chrome

Gulp Livereload in Chrome


That's not how livereload works. It doesn't run a server to load your content — it runs a separate server to notify when content changes.

When you enable livereload*, a small javascript is embedded in your page which listens to the LR server. When you notify the server that a resource was modified, it tells any listeners, which in turn reload the resource from where ever they originally loaded the resource.

If your webapp/site/page is entirely self contained, you can simply open the file:// url to the page you want in your browser, enable livereload, and it should work.

However, if you are dealing with external resources, you should fire up a server of some sort. There's far too many ways for me to select one for you, but you can use connect, express, or some other node library, you could run python -m SimpleHTTPServer in your directory if you have python installed, etc.

If you want to integrate a connect server into your build process, I have a recipe at the bottom of this article.


* You can enable livereload via a browser plugin or using the gulp-embedlr plugin during development, which I prefer since it works across multiple browsers and devices.


1ocalhost:8081 or localhost:8081 ? Perhaps a spelling error on the first letter.