Livereload使用Gulp无法在Chrome中运行，我缺少什么

Question

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

1. 在Chrome中安装了Livereload扩展程序。
2. 已安装gulp-livereload。
3. 设置gulpfile.js。
4. Ran gulp。

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

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

我的Gulpfile：

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"
  }
}

Answer 1

这就是我的工作。我使用了插件gulp-connect而不是gulp-livereload。

1. 在Chrome中安装了Livereload扩展程序。
2. 已安装的插件npm install gulp-connect。
3. 设置gulpfile.js（参见下面的代码）。
4. 转到您的浏览器并转到网址http://localhost:8080/
5. 点击浏览器中的liverelaod图标。
6. 跑gulp。
7. 完成。

我的Gulpfile：

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

Answer 2

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

我可能遇到了同样的问题 - 当我点击LiveReload图标时它只是没有做任何事情。

Answer 3

对我来说至关重要的是重新启动浏览器。您无需添加gulp-connect即可使用 - 只需执行以下操作：

1. 安装livereload chrome扩展程序
2. 配置你的gulpfile和package.json（OP已正确完成）
3. 转到 chrome：// extensions ，然后选中“允许访问文件网址”框
4. 重新启动chrome！
5. 导航到您正在测试的页面，然后单击livereload图标。您应该注意到图标中间的圆圈已经填满。
6. 开始编辑代码，并惊叹于自动重新加载功能所节省的宝贵秒数。

Answer 4

很抱歉覆盖基础知识，但我们都会不时被发现。

你点击了Chrome中的livereload按钮吗？

如果实时重装服务器正在运行，如果它的中间会有一个灰色实心点。

像这样：

如果不是，您将收到如下错误：

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