Gulp livereload not working in Chrome

Question

So I am trying to set up the livereload server, however, I never get the message Live reload server listening on: <port_number> like in this video. If I change my files, the console says that the file was reloaded. I have the Chrome extension installed. What am I missing? Thanks.

gulpfile.js

'use strict';

// include gulp
var gulp = require('gulp'),
    gutil = require('gulp-util');

// include plug-ins
var autoprefix = require('gulp-autoprefixer'),
    changed = require('gulp-changed'),
    concat = require('gulp-concat'),
    http = require('http'),
    imagemin = require('gulp-imagemin'),
    jshint = require('gulp-jshint'),
    livereload = require('gulp-livereload'),
    minifyCSS = require('gulp-minify-css'),
    minifyHTML = require('gulp-minify-html'),
    sass = require('gulp-sass'),
    st = require('st'),
    stripDebug = require('gulp-strip-debug'),
    uglify = require('gulp-uglify');

gulp.task('build-css', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/styles'));
});

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
  var htmlSrc = './src/*.html',
      htmlDst = './dist';

  return gulp.src(htmlSrc)
    .pipe(changed(htmlDst))
    .pipe(minifyHTML())
    .pipe(gulp.dest(htmlDst));
});

// minify new images
gulp.task('imagemin', function() {
  var imgSrc = './src/images/**/*',
      imgDst = './dist/images';

  return gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
});

// JS hint task
gulp.task('jshint', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
  return gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./dist/scripts/'));
});

gulp.task('server', function(done) {
  http.createServer(
    st({
      path: __dirname + '/dist', 
      index: 'index.html', 
      cache: false
    })
  ).listen(8080, done);
});

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  return gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./dist/styles/'));
});

gulp.task('watch', ['server'], function() {
  livereload.listen({
    basePath: 'dist'
  });

  // watch for HTML changes
  gulp.watch('./src/*.html', ['htmlpage']).on('change', livereload.changed);

  // watch for JS changes
  gulp.watch('./src/scripts/*.js', ['jshint', 'scripts']).on('change', livereload.changed);

  // watch for CSS changes
  gulp.watch('./src/styles/*.css', ['styles']).on('change', livereload.changed);

  gulp.watch('src/scripts/**/*.js', ['jshint']).on('change', livereload.changed);
  gulp.watch('src/styles/scss/**/*.scss', ['build-css']).on('change', livereload.changed);
});

// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'watch'], function() {
  return gutil.log('Gulp is running!')
});

Answer 1

I recommend your attention to the real-time browser page reload tool.

Live Reload Browser Page

Live Reload Browser Page

GitHub

Easy to use. Works independently of the IDE. But you need the IDE to be able to auto-save files. Also works with tools like Gulp, WebPack, Grunt and others.