Livereload isn't working in gulp

Question

I used gulp-webapp (generator from yeoman) and add some other tasks (like gulp-sass & gulp-coffee).

But now Livereload isn't starting. I need to see something like this

[gulp] Live reload server listening on: 35729

But output looks like

➜  app git:(master) ✗ gulp watch
[gulp] Using gulpfile ~/Dev/lsd/app/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Starting 'styles'...
[gulp] Starting 'scripts'...
[gulp] Starting 'connect'...
[gulp] Finished 'connect' after 68 ms
Started connect web server on http://localhost:9000
[gulp] Finished 'scripts' after 181 ms
[gulp] gulp-size: total 128.75 kB
[gulp] Finished 'styles' after 806 ms
[gulp] Starting 'serve'...
[gulp] Finished 'serve' after 5.73 ms

And I don't understand, what is my problem.

My gulpfile.coffee:

"use strict"

gulp = require("gulp")
$ = require("gulp-load-plugins")()

gulp.task "styles", ->
  gulp.src("app/styles/main.scss").pipe($.sass()).pipe($.autoprefixer("last 1 version")).pipe(gulp.dest(".tmp/styles")).pipe $.size()

gulp.task "scripts", ->
  gulp.src("app/scripts/**/*.coffee").pipe($.coffee()).pipe gulp.dest(".tmp/scripts")

gulp.task "html", [
  "styles"
  "scripts"
], ->
  jsFilter = $.filter("**/*.js")
  cssFilter = $.filter("**/*.css")
  gulp.src("app/*.html").pipe($.useref.assets()).pipe(jsFilter).pipe($.uglify()).pipe(jsFilter.restore()).pipe(cssFilter).pipe($.csso()).pipe(cssFilter.restore()).pipe($.useref.restore()).pipe($.useref()).pipe(gulp.dest("dist")).pipe $.size()

gulp.task "clean", ->
  gulp.src([
    ".tmp"
    "dist"
  ],
    read: false
  ).pipe $.clean()

gulp.task "build", [
  "html"
  "fonts"
]
gulp.task "default", ["clean"], ->
  gulp.start "build"

gulp.task "connect", ->
  connect = require("connect")
  app = connect().use(require("connect-livereload")(port: 35729)).use(connect.static("app")).use(connect.static(".tmp")).use(connect.directory("app"))
  require("http").createServer(app).listen(9000).on "listening", ->
    console.log "Started connect web server on http://localhost:9000"

gulp.task "serve", [
  "styles"
  "scripts"
  "connect"
], ->
  require("opn") "http://localhost:9000"

gulp.task "watch", [
  "clean"
  "serve"
], ->
  server = $.livereload()
  gulp.watch([
    "app/*.html"
    ".tmp/styles/**/*.css"
    ".tmp/scripts/**/*.js"
  ]).on "change", (file) ->
    server.changed file.path

  gulp.watch "app/styles/**/*.scss", ["styles"]
  gulp.watch "app/scripts/**/*.coffee", ["scripts"]

Answer 1

Live reload is very easy to using gulp and express the code is below

var gulp = require('gulp'); 
gulp.task('express', function() {   
  var express = require('express');
  var app = express();   
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname));   
  app.listen(4000); 
});


var tinylr; 
gulp.task('livereload', function() {   
 tinylr = require('tiny-lr')();   
 tinylr.listen(4002); 
});


function notifyLiveReload(event) {   
 var fileName = require('path').relative(__dirname, event.path);   
 tinylr.changed({
        body: {
          files: [fileName]
        }  
    });
}

gulp.task('watch', function() {  
  gulp.watch('*.html', notifyLiveReload);  
  gulp.watch('js/*.js', notifyLiveReload);    
  gulp.watch('css/*.css', notifyLiveReload); 
});

gulp.task('default', ['express', 'livereload', 'watch'], function() {

});

when you are change the html,js and css file it will reload

Answer 2

I have been using gulp-webserver. It makes using LiveReload very simple.

gulp = require 'gulp'
webserver = 'gulp-webserver'
path = 'path'

gulp.task "webserver", ->
    gulp.src(path.resolve("./dist")).pipe webserver(
        port: "8080"
        livereload: true
    )

Answer 3

I use gulp and with livereload and they are all working great.
take a look here. This is a server task I use for dev purpose. It is fully working.

This snipped has being tested

http = require "http"
path = require "path"
Promise = Promise or require("es6-promise").Promise
express = require "express"
gulp = require "gulp"
{log} = require("gulp-util")
tinylr = require "tiny-lr"
livereload = require "gulp-livereload"

ROOT = "dist"
GLOBS = [path.join(ROOT, "/**/*")]
PORT = 8000
PORT_LR = PORT + 1

app = express()
app.use require("connect-livereload") {port: PORT_LR}
app.use "/", express.static "./dist"

http.createServer(app).listen PORT, ->
  log "Started express server on http://localhost: #{PORT}"

lrUp = new Promise (resolve, reject) ->
  lrServer = tinylr()
  lrServer.listen PORT_LR, (err) ->
    return reject(err)  if err
    resolve lrServer

gulp.watch GLOBS, (evt) ->
  return if evt.type is "deleted"

  lrUp.then (lrServer) ->
    log "LR: reloading", path.relative(ROOT, evt.path)
    gulp.src(evt.path).pipe livereload(lrServer)

Note I'm using a different port for livereload (9001), I do this because often you want to have multiple instance of the livereload server running in parallel. The suggestion to use port 35729 is only if you are using a browser extension, which you aren't since you are using the connect middleware.

Hope this helps

Answer 4

I originally suggested changing the port however livereload doesnt prefer this as an option. What you need to do is kill the service running on port 35729, you do this by running the following command from the terminal:

lsof -iTCP:35729

This will then give you a list of proccesses running on this port, pick the first PID in the list i.e. 3996 then run this command:

 kill -9 3996

Now start your gulp script again and it wont conflict.