Livereload不能在Chrome中使用Gulp，我缺少什麼

Question

我想使用Livereload使用Gulp，Sublime Text 3和Chrome，但由於某些原因它不起作用。這是我做的。

1. 在Chrome中安裝了Livereload擴展。
2. 安裝了gulp-livereload。
3. 設置gulpfile.js。
4. 冉喝。

我在這裏錯過了什麼？我需要爲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. 奔跑吞嚥。
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服務器請確保LiveReload 2.3（或更高版本）或其他兼容的服務器正在運行「。

Answer 3

在本地開發時確保「允許訪問文件URL」在Chrome的擴展設置中爲LiveReload打勾。

我可能一直有同樣的問題 - 當我點擊LiveReload圖標時，它只是沒有做任何事情。

Answer 4

對我來說至關重要的是重新啓動瀏覽器。爲此，您不需要添加一口，連接到工作 - 只要做到以下幾點：

1. 安裝livereload Chrome擴展
2. 配置您的gulpfile和的package.json（op爲使操作正確）
3. 前往chrome：// extensions並勾選'允許訪問文件網址'
4. 重新啓動Chrome瀏覽器！
5. 導航到您正在測試的頁面，然後單擊livereload圖標。您應該注意到圖標中間的圓圈變滿了。
6. 開始編輯代碼並驚歎於自動重新加載功能保存的寶貴秒數。