Livereload 无法使用 Gulp 在 Chrome 中运行，我错过了什么答案

【问题标题】：Livereload not working in Chrome using Gulp, what am I missingLivereload 无法使用 Gulp 在 Chrome 中运行，我错过了什么
【发布时间】：2015-11-30 16:41:40
【问题描述】：

我正在尝试通过 Gulp、Sublime Text 3 和 Chrome 使用 Livereload，但由于某种原因它不起作用。这就是我所做的。

在 Chrome 中安装了 Livereload 扩展。
已安装 gulp-livereload。
设置 gulpfile.js。
喝了一大口。

我在这里缺少什么？我需要为 Sublime Text 3 安装 Livereload 插件吗？

仅供参考 - Chrome 中 Livereload 扩展程序中的“选项”按钮显示为灰色。

我的 Gulp 文件：

var gulp = require('gulp');        
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

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

打包文件：

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

【问题讨论】：

标签： google-chrome gulp livereload gulp-sass gulp-livereload

【解决方案1】：

对我来说最重要的是重新启动浏览器。您无需为此添加 gulp-connect - 只需执行以下操作：

安装 livereload chrome 扩展
配置您的 gulpfile 和 package.json（OP 已正确完成）
转到 chrome://extensions 并选中“允许访问文件 URL”复选框
重启 chrome！
导航到您正在测试的页面并单击 livereload 图标。您应该注意到图标中间的圆圈已被填满。
开始编辑代码，惊叹于自动重新加载功能节省的宝贵时间。

【讨论】：

【解决方案2】：

在本地开发时，请确保在 Chrome 的扩展程序设置中为 LiveReload 勾选 “允许访问文件 URL”。

我可能遇到了同样的问题——当我点击 LiveReload 图标时，它什么也没做。

【讨论】：

【解决方案3】：

这就是我所做的。我使用插件gulp-connect 而不是gulp-livereload。

在 Chrome 中安装了 Livereload 扩展。
已安装插件npm install gulp-connect。
设置 gulpfile.js（参见下面的代码）。
转到您的浏览器并转到 URL http://localhost:8080/
点击浏览器中的 liveelaod 图标。
运行 gulp。
完成。

我的 Gulp 文件：

var gulp = require('gulp');        
var scssPlugin = require('gulp-sass');
var connect = require('gulp-connect');
     
gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

gulp.task('watchMyStyles', function() {
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles', 'connect']);

打包文件：

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-sass": "^2.0.4"
  }
}

参考链接：

https://www.youtube.com/watch?v=KURMrW-HsY4&index=7&list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

【讨论】：

我也是这样做的，不知道为什么 gulp-livereload 不起作用
我在 gulp-livereload 和 chrome 上遇到了同样的问题，即使在 chrome 的 livereload 扩展设置中勾选了启用文件 url。切换到 gulp-connect 工作
谢谢你——gulp-connect 第一次对我来说很容易工作。
这并不能真正回答问题。检查 Chris 的答案以实际修复 LiveReload。

【解决方案4】：

很抱歉涵盖了基础知识，但我们都会时不时地陷入困境。

您是否点击了 chrome 中的 livereload 按钮？

如果实时重载服务器正在运行，则中间会有一个实心灰点。

像这样：

如果没有，你会得到一个这样的错误：

“无法连接到 LiveReload 服务器。请确保 LiveReload 2.3（或更高版本）或其他兼容服务器正在运行。”

【讨论】：