Gulp livereload не работает в Chrome

Question

Так что я пытаюсь настроить сервер загрузки, но я никогда не получаю сообщение Live reload server listening on: <port_number>, как в этом video. Если я изменю свои файлы, консоль сообщит, что файл был перезагружен. У меня установлено расширение Chrome. Что мне не хватает? Благодарю.

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

Я использую браузер синхронизацию, чтобы перезагрузить браузер, когда файл был изменен. Попробуйте что-то вроде этого:

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); 

gulp.task('serve', function() { 

    gulp.watch("app/**/*.js").on('change', browserSync.reload); 
    gulp.watch("templates/**/*.html").on('change', browserSync.reload); 
    gulp.watch("css/**/*.css").on('change', browserSync.reload); 

    browserSync.init({ 
     server: "./" 
    }); 

}); 

gulp.task('default', ['serve']);