javascript - Gulp livereload在Chrome中不起作用

因此，我尝试设置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!')
});

最佳答案

文件更改后，我使用browser-sync重新加载浏览器。
尝试这样的事情：

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']);

关于javascript - Gulp livereload在Chrome中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33803615/