Gulp livereload不能在Chrome中工作

Question

所以我試圖設置livereload服務器，但是，我從來沒有收到像video這樣的消息Live reload server listening on: <port_number>。如果我更改我的文件，控制檯會說該文件已重新加載。我已安裝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']);