Livereload 无法使用 Gulp 在 Chrome 中运行，我错过了啥

Posted 2023-02-16

【中文标题】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"
  

【参考方案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（或更高版本）或其他兼容服务器正在运行。”