Gulp Livereload不工作在Chrome使用大口，我错过了什么

rekjcdws 于 2022-12-08 发布在 Gulp

关注(0)|答案(5)|浏览(133)

我尝试使用Livereload使用Gulp，Sublime Text 3和Chrome，但由于某些原因它不工作。
1.在Chrome中安装了Liverload扩展。
1.安装了大容量起重机。
1.安装gulpfile.js。
1.然一饮而尽。
我在这里错过了什么？我需要为Sublime Text 3安装Liverload插件吗？
FYI -Chrome中Liverload扩展中的“选项”按钮变灰。
我的吞咽文件：

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

gulp

来源：https://stackoverflow.com/questions/32399469/livereload-not-working-in-chrome-using-gulp-what-am-i-missing

5条答案

按热度按时间

fykwrbwg1#

这是我所做的工作。我使用插件gulp-connect而不是gulp-livereload。
1.在Chrome中安装了Liverload扩展。
1.已安装插件npm install gulp-connect。
1.设置gulpfile.js（请参见下面的代码）。
1.转到您的浏览器并转到URL http://localhost:8080/
1.单击浏览器中的liverelaod图标。
1.润大口。
1.好了，好了
我的吞咽文件：

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

赞(0）回复(0）举报 2022-12-08

pjngdqdw2#

在本地开发时，请确保在Chrome的扩展设置中为LiveReload勾选了**“允许访问文件URL”**。
我可能也遇到了同样的问题--当我点击LiveReload图标时，它什么也没做。

赞(0）回复(0）举报 2022-12-08

qc6wkl3g3#

对我来说，最重要的是重启浏览器。你不需要添加gulp-connect就可以了--只要执行以下操作：
1.安装活载镀 chrome 加长件
1.配置您的gulpfile和package.json（OP已经正确地完成了）
1.转到chrome：//extensions并选中“允许访问文件URL”复选框
1.重新启动chrome！
1.导航到你要测试的页面，点击livereload图标，你会注意到图标中间的圆圈被填满了。
1.开始编辑代码，并惊叹于自动重新加载功能节省的宝贵时间。

赞(0）回复(0）举报 2022-12-08

wmvff8tz4#

抱歉，我只讲了最基本的，但我们都会时不时地被抓住。
你有没有在chrome中点击livereload按钮？
如果实时重新加载服务器正在运行，则其中间会有一个实心灰点。
例如：