Integrating tiny-lr in gulp-live-server

Question

I'm using the node module gulp-live-server to run an express app at app.js. It works, but the browser doesn't live reload. Near the bottom of the page in the link above the docs say that one must use the tiny-lr mod to integrate live reload. I looked all over and can't find how I am specifically supposed to add tiny-lr. I added the script tag as asked in my html file. Here's the gulpfile:

var gulp = require('gulp');
var gls = require('gulp-live-server');
var tinylr = require('tiny-lr');

var port = 35729;

gulp.task('serve', function () {
    var server = gls.new('app.js');
    server.start();

    tinylr().listen(port, function() {
      console.log('... Listening on %s ...', port);
    })
});

app.js:

var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
app.get('/style.css', function (req, res) {
  res.sendFile(__dirname + '/style.css');
});

http.listen( process.env.PORT || 3000, function(){
  console.log('listening on *:3000');
});

I did notice that while express is listening on port 3000, tiny-lr is listening on 35729. If I change the express port to 35729, though, it throws and error and says there is already a server listening on that port. Any help is appreciated, thanks for your consideration.

Answer 1

You don't need gulp task for this you can specify it in app.js file.

In app.J's file.

var tinylr = require('tiny-lr'); app.use (tinylr.middleware({ app: app }))

Also the port should be 35729