Livereload nie działa w przeglądarce Chrome przy użyciu Gulp, czego mi brakuje

Question

Próbuję użyć Livereload używając Gulp, Sublime Text 3 i Chrome, ale z jakiegoś powodu to nie działa. Oto co zrobiłem.

1. Zainstalowano rozszerzenie Livereload w przeglądarce Chrome.
2. zainstalowana łyk-livereload.
3. gulpfile.js Setup.
4. Ran gulp.

Co ja tu brakuje? Czy muszę zainstalować wtyczkę Livereload dla Sublime Text 3?

FYI - przycisk Opcje w rozszerzeniu Livereload w Chrome jest wyszarzona.

My 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']); 

Package File:

{ 
    "devDependencies": { 
    "gulp": "^3.9.0", 
    "gulp-livereload": "^3.8.0", 
    "gulp-sass": "^2.0.4" 
    } 
} 

Answer 1

To, co zrobiłem, że pracował. Użyłem wtyczki gulp-connect zamiast gulp-livereload.

1. Zainstalowano rozszerzenie Livereload w przeglądarce Chrome.
2. Zainstalowana wtyczka npm install gulp-connect.
3. Skonfiguruj gulpfile.js (patrz kod poniżej).
4. Przejdź do przeglądarki i przejdź pod adres URL: http://localhost:8080/
5. Kliknij ikonę liverelaod w przeglądarce.
6. Uruchomić haust.
7. Gotowe.

My 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']); 

Package File:

{ 
    "devDependencies": { 
    "gulp": "^3.9.0", 
    "gulp-connect": "^2.2.0", 
    "gulp-sass": "^2.0.4" 
    } 
} 

referencyjne Linki:

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

Niestety na pokrycie podstaw ale wszyscy złapać się od czasu do czasu.

kliknąłeś przycisk livereload w chrome?

jeśli serwer jest uruchomiony na żywo przeładowania jeśli będzie mieć solidne szarą kropką w środku.

tak:

Jeśli nie dostaniesz błąd tak:.

„Nie można połączyć się z serwerem LiveReload Upewnij się, że LiveReload 2.3 (lub nowszy) lub inny serwer zgodny jest uruchomiony . "

Answer 3

Podczas pracy lokalnie upewnij się, że "Zezwalaj na dostęp do adresów URL plików" jest zaznaczone dla LiveReload w ustawieniach rozszerzeń Chrome.

Mogłem mieć ten sam problem - po kliknięciu ikony LiveReload po prostu nic nie zrobiłem.

Answer 4

Najważniejsze dla mnie było ponowne uruchomienie przeglądarki. Nie trzeba dodawać łyk-connect to zadziałało - wystarczy wykonać następujące czynności:

1. Zainstaluj rozszerzenie livereload chrom
2. Skonfiguruj gulpfile i package.json (PO zrobiła tak poprawnie)
3. Przejdź do chrome: // extensions i zaznacz pole "Zezwalaj na dostęp do adresów URL plików"
4. Restart chrome!
5. Przejdź do testowanej strony i kliknij ikonę livereload. Powinieneś zauważyć, że okrąg w środku ikony staje się wypełniony.
6. Rozpocznij edycję kodu i podziwiaj cenne sekundy zapisane przez funkcję automatycznego ponownego ładowania.