Gulp z live-reload

Question

Mam stronę internetową, którą zbudowałem z węzłem. Mogę z powodzeniem uruchomić i uruchomić witrynę, uruchamiając node server.js z wiersza polecenia. Następnie wchodzę na stronę, odwiedzając "http://localhost:3000" w mojej przeglądarce. Próbuję teraz poprawić niektóre procesy kompilacji otaczające witrynę. Aby to zrobić, polegam na Gulpie.

Chcę automatycznie ponownie załadować stronę po wprowadzeniu zmiany w pliku HTML lub CSS. Natknąłem się na wtyczkę gulp-livereload. Zainstalowałem go zgodnie z opisem w dokumentacji. Jednak, kiedy odwiedzam „http://localhost:35729/” w przeglądarce, po prostu zobaczyć, co następuje:

{ 
    minilr: "Welcome", 
    version: "0.1.8" 
} 

Moim zadaniem łyk jest skonfigurowany tak:

gulp.task('launch', function() { 
    var toWatch = [ 
     'src/**/*.html', 
     'src/**/*.css' 
    ]; 

    livereload.listen(); 
    gulp.watch(toWatch, function() { 
     console.log('reloading...'); 
     livereload(); 
    }) 
} 

nie widzę moją stronę domu tak jak ja kiedy odwiedzam "http://localhost:3000" po uruchomieniu node server.js. czego mi brakuje?

Answer 1

Dlaczego odwiedzasz "http://localhost:35729/"? Jeśli jest to port, w którym nasłuchuje livereload, to nie wyświetli Twojej witryny, ponieważ, jak powiedziałeś, twoja strona jest dostępna z 'http://localhost:3000'.

Zakładam, że poprawnie skonfigurowałeś łyk. Przez to mam na myśli, że livereload jest słuchanie i oglądanie zmian w plikach i rur masz „.pipe (livereload()”.

1. Musisz zainstalować https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. trzeba uruchomić aplikację „http://localhost:3000” w przeglądarce chrome.
3. trzeba będzie w barze wtyczki do przeglądarki nową ikonę (jest ikoną tej wtyczki)
4. trzeba kliknąć tę ikonę, aby uruchomić tę wtyczkę
5. zakończyć

Teraz, gdy zmienisz coś w plikach, obserwator łyk zauważy to, wykona trochę pracy i poinformuje wtyczkę chrome, że są zmiany, Ta wtyczka odświeży twoją stronę projektu.

Answer 2

Przeładowanie na żywo to protokół do wysyłania powiadomień do przeglądarki w celu ponownego załadowania. Ale potrzebujesz wtyczki do przeglądarki, aby nasłuchiwać i przeładować, chociaż można zrezygnować z wtyczki za pomocą znacznika skryptu.

Wtyczka gulp-livereload zajmuje się tylko implementacją serwera livereload, ale musisz nadal obsługiwać pliki przez serwer HTTP z wtyczką.

Możesz użyć modułu do chodzenia, który obsługuje zarówno gulp-connect.

Jednak jeśli nie jesteś przywiązany do livereload z jakiegoś powodu, sugeruję użycie browserync. Browsersync to dobra alternatywa dla livereload, która dodaje automatycznie możliwość synchronizowania widoku między przeglądarkami. Ponieważ wstrzykuje znacznik skryptu do twojego html i nasłuchuje na gnieździe, nie potrzebujesz żadnych wtyczek, żeby to działało. Działa nawet na urządzeniach mobilnych.

Może to wyglądać tak, jak w przypadku przeglądarki browsersync. Nie zapomnij dodać browsersync do swojego pakietu .json plik

var browserSync = require('browser-sync').create(); 

gulp.task('serve', [] , function(cb){ 

    browserSync.init({ 
     open: true , 
     server: { 
      baseDir: "src" 
     } 
    }); 

    gulp.watch([ 
     'src/**/*' , 
    ] , ['serve:reload']); 

}); 

gulp.task('serve:reload' , [] , function(){ 
    browserSync.reload(); 
});