google-chrome - Livereload 无法使用 Gulp 在 Chrome 中运行，我错过了什么

Question

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

1. 在 Chrome 中安装了 Livereload 扩展。
2. 安装 gulp-livereload。
3. 设置 gulpfile.js。
4. 冉吞咽。

我在这里想念什么？我需要为 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

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

1. 在 Chrome 中安装了 Livereload 扩展。
2. 安装插件npm install gulp-connect。
3. 设置 gulpfile.js（见下面的代码）。
4. 转到您的浏览器并转到 URL http://localhost:8080/
5. 单击浏览器中的 liveelaod 图标。
6. 运行吞咽。
7. 完毕。

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

像这样：

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

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

Answer 5

我使用Live Reload 浏览器页面

实时重新加载浏览器页面

浏览器设置

从谷歌浏览器市场下载

---

吞咽设置

安装

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

示例如何使用 Live Reload Browser Page wuth Gulp

live-reload-browser-page.com