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

Question

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

在 Chrome 中安装了 Livereload 扩展。
已安装 gulp-livereload。
设置 gulpfile.js.
运行 gulp.

我在这里错过了什么？我需要为 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"
  }
}

Answer 1

很抱歉涵盖基础知识，但我们都会不时被抓到。

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

如果实时重新加载服务器是运行中间会有一个灰色实心点。

像这样：

否则你会得到这样的错误：

"Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running."

Answer 2

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

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

我的 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 3

在本地开发时，确保在 Chrome 的扩展设置中为 LiveReload 勾选 'Allow access to file URLs'。

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

Answer 4

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

安装 livereload chrome 扩展程序
配置您的 gulp 文件和 package.json（OP 已正确完成）
转到 chrome://extensions 并选中 'Allow access to file URLs'
重启 chrome!
导航到您正在测试的页面，然后单击 livereload 图标。您应该注意到图标中间的圆圈变成了实心圆圈。
开始编辑代码并惊叹于自动重新加载功能节省的宝贵时间。

Answer 5

我用Live Reload Browser Page

实时重新加载浏览器页面

浏览器设置

Download from Google Chrome market

Gulp 设置

安装

npm i live-reload-bp --save-dev

const
  gulp = require('gulp'),
  liveReloadBP = require("live-reload-bp"),
  plumber = require('gulp-plumber'),
  gulpSass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  cssnano = require('cssnano'),
  webServer = require('./web-server');

const 
  cssWatch = 'src/scss/*.scss',
  cssSrc = ['src/scss/*.scss'],
  cssDest = 'dest/css';

const 
  liveReload = new liveReloadBP({
    host: '127.0.0.1', 
    port: '8080'
  });


function css() {
  return gulp.src(cssSrc)
  .pipe(plumber({errorHandler: onError}))        
  .pipe(gulpSass().on('error', gulpSass.logError))   
  .pipe(postcss([
      cssnano({zindex: false, reduceIdents: false})
  ]))     
  .pipe(gulp.dest(cssDest));
}


function onError(err){
  /* Here can be used: 
    https://github.com/Yuriy-Svetlov/live-alert-bp
  */

  liveReload.setError();  // This usage is optional. You can not use this, if you want your page to reload anyway.

  this.emit('end');
}


function reloadPage(ok){
  if(liveReload.hasError() === false){ // This usage is optional. You can not use this, if you want your page to reload anyway.
    liveReload.reloadPage();
  }

  liveReload.resetError();

  ok();
}


function watch(){
  liveReload.run();
  // webServer();

  gulp.watch(cssWatch, gulp.series(css, reloadPage));
}


exports.css = css;
exports.watch = watch;
exports.reloadPage = reloadPage;
exports.start = gulp.series(css, watch);

或者您可以使用 Gulp gulp-live-reload-bp

Examples how to use Live Reload Browser Page wuth Gulp

live-reload-browser-page.com

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

Livereload not working in Chrome using Gulp, what am I missing

google-chrome

livereload

gulp

gulp-sass

gulp-livereload

实时重新加载浏览器页面

浏览器设置

Gulp 设置