没有在Chrome上工作，我错过了什么？

Question

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

1. 在Chrome中安装了肝脏扩展程序。
2. 已经安装了吞咽-肝脏。
3. 设置gulpfile.js。
4. 一饮而尽。

我在这里错过了什么？我是否需要安装崇高文本3的肝脏插件？

FYI - Chrome中的可选选项按钮是灰色的。

我的卷宗：

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中安装了肝脏扩展程序。
2. 已安装插件npm install gulp-connect。
3. 安装gulpfile.js (请参阅下面的代码)。
4. 转到浏览器并转到URL http://localhost:8080/
5. 单击浏览器中的liverelaod图标。
6. 快喝一口。
7. 好了。

我的卷宗：

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

参考链接：

dc9Yckm

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

Answer 2

在本地开发时，请确保‘允许访问文件URL’在Chrome的扩展设置中标记为LiveReload。

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

Answer 3

对我来说最重要的是重新启动浏览器。您不需要添加才能工作--只需执行以下操作：

1. 安装livereload扩展程序
2. 配置您的your文件和package.json ( OP正确地这样做了)
3. 转到chrome://extensions并选中“允许访问文件URL”框
4. 重新启动铬！
5. 导航到您正在测试的页面，然后单击livereload图标。您应该注意到，图标中间的圆圈已被填充。
6. 开始编辑代码，并对自动重新加载功能节省的宝贵秒感到惊奇。