Gulp with live reboot

Question

I have a website that I created using Node. I can successfully start and start the site by running node server.js from the command line. I then access the site by visiting " http: // localhost: 3000 " in my browser. I'm trying to improve some build processes related to the site. I rely on Gulp for this.

I want to automatically reload the web page when making changes to HTML or CSS files. I came across the gulp -livereload plugin. I installed it as described in the docs. However, when I visit " http: // localhost: 35729 / " in the browser, I just see the following:

 { minilr: "Welcome", version: "0.1.8" } 

My gulp task is configured as follows:

 gulp.task('launch', function() { var toWatch = [ 'src/**/*.html', 'src/**/*.css' ]; livereload.listen(); gulp.watch(toWatch, function() { console.log('reloading...'); livereload(); }) } 

I don’t see my homepage as I do when I visit http: // localhost: 3000 "after starting node server.js . What am I missing?

Answer 1

Live reload is a protocol for sending notifications to the browser for rebooting. But you need a browser plugin to listen and reboot, although you can opt out of the plugin using the script tag.

The gulp -livereload plugin refers only to the implementation of the pedal download server, you still need to serve files through the http server from gulp.

You can use the gulp module, which runs as gulp-connect .

However, if for some reason you are not tied to downloading, I suggest using a browser. Browsersync is a good alternative to cookies , which adds the ability to synchronize your browsing between browsers. Since it embeds the script tag in your html and listens on the socket, you don't need plugins to make it work. It works even on mobile devices.

A gulp task using a browser might look like this. Remember to add the browser package.json file

 var browserSync = require('browser-sync').create(); gulp.task('serve', [] , function( cb ){ browserSync.init({ open: true , server: { baseDir: "src" } }); gulp.watch([ 'src/**/*' , ] , ['serve:reload'] ); }); gulp.task('serve:reload' , [] , function(){ browserSync.reload(); }); 

Answer 2

Why are you visiting ' http: // localhost: 35729 / '? If this is the port on which the download function is listened, it will not show your site, because, as you said, your site is accessible from http: // localhost: 3000 '.

I assume you configured gulp correctly. By this I mean that listening in download mode happens and you observe changes in your files and in the pipes that you have .pipe (livereload () ".

• You need to install https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
• you need to run the http: // localhost: 3000 'application in a Chrome browser.
• you have a new icon in your browser plugin (this is the icon of this plugin)
• you need to click this icon to run this plugin.
• finish

Now when you change something in the files, gulp watcher will notice this, do some work and tell the chrome plugin that there are changes. This plugin will refresh your project page.