Example-FrontEndLiveReload-Gulpfile

var gulp = require('gulp');
 
var EXPRESS_PORT = 4000;
var EXPRESS_ROOT = __dirname;
var LIVERELOAD_PORT = 35729;
 
// Let's make things more readable by
// encapsulating each part's setup
// in its own method
function startExpress() {
 
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')());
  app.use(express.static(EXPRESS_ROOT));
  app.listen(EXPRESS_PORT);
}
 
// We'll need a reference to the tinylr
// object to send notifications of file changes
// further down
var lr;
function startLivereload() {
 
  lr = require('tiny-lr')();
  lr.listen(LIVERELOAD_PORT);
}
 
// Notifies livereload of changes detected
// by `gulp.watch()` 
function notifyLivereload(event) {
 
  // `gulp.watch()` events provide an absolute path
  // so we need to make it relative to the server root
  console.log("Notifylivereoload triggeres")
  var fileName = require('path').relative(EXPRESS_ROOT, event.path);
 
  lr.changed({
    body: {
      files: [fileName]
    }
  });
}
 
// Default task that will be run
// when no parameter is provided
// to gulp
gulp.task('default', function () {
 
  startExpress();
  startLivereload();
  //**********THIS IS WHERE YOU SPECIFY THE TYPE OF FILES YOU WANT TO WATCH FOR. 
  //IN THIS CASE, YOU ARE WATCHING FOR CHANGES IN HTML AND CSS**************
  gulp.watch('*.html', notifyLivereload);
  //Note, the relative path must be used for specifying the type of files. In this case, the below statement
  //specifies that that gulp should watch for changes in all CSS files within the ./css/ folder.
  gulp.watch('css/*.css', notifyLivereload);
});