【问题标题】：Gulp livereload not working in ChromeGulp livereload 在 Chrome 中不起作用
【发布时间】：2015-11-19 12:11:03
【问题描述】：

所以我正在尝试设置 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!')
});

【问题讨论】：

标签： javascript html css gulp workflow

【解决方案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']);

【讨论】：

谢谢！还有一个问题 - 当我运行 gulp 命令时，我如何退出它以便我可以安装新的依赖项？我在任何地方都找不到它，所以我一直关闭终端并返回文件夹 lol。
@LubosMenus ctrl + c 在 windows 上，如果你运行 mac/linux 可能是一样的，但我不确定。

【解决方案2】：

我建议您注意实时浏览器页面重新加载工具。

实时重新加载浏览器页面

Live Reload Browser Page

GitHub

易于使用。独立于 IDE 工作。但是您需要 IDE 才能自动保存文件。也适用于 Gulp、WebPack、Grunt 等工具。

【讨论】：