Gulp con live-ricarica

Question

Ho un sito Web che ho creato con Node. Posso avviare ed eseguire correttamente il sito eseguendo node server.js dalla riga di comando. Quindi accedo al sito visitando "http://localhost:3000" nel mio browser. Ora sto cercando di migliorare parte del processo di creazione che circonda il sito. Per farlo, mi affido a Gulp.

Desidero ricaricare automaticamente la pagina Web quando viene apportata una modifica ai file HTML o CSS. Mi sono imbattuto nel plugin gulp-livereload. L'ho installato come descritto nei documenti. Tuttavia, durante la mia visita "http://localhost:35729/" nel browser, ho solo vedere il seguente:

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

mio compito sorso è configurato in questo modo:

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

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

non vedo la mia home page come faccio io quando visito "http://localhost:3000" dopo aver eseguito node server.js. Cosa mi manca?

Answer 1

Perché stai visitando 'http://localhost:35729/'? Se questa è la porta in cui il livereload è in ascolto, allora non mostrerà il tuo sito, perché come hai detto il tuo sito è disponibile da 'http://localhost:3000'.

Suppongo che tu abbia configurato correttamente gulp. Con essa voglio dire che livereload è in ascolto, e si guarda i cambiamenti nei file e nelle tubazioni si deve '.pipe (livereload()'.

1. è necessario installare https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. si deve eseguire la vostra applicazione 'http://localhost:3000' nel browser Chrome.
3. si avrà nella barra di plugin per il browser nuova icona (questo è l'icona di questo plugin)
4. è necessario fare clic su questa icona per eseguire questo plugin
5. finire

Ora quando cambi qualcosa nei file, gulp watcher lo noterà, lavorerà e informerà il plugin di Chrome che ci sono cambiamenti, Questo plugin aggiornerà la pagina del tuo progetto.

Answer 2

Il live reload è un protocollo per inviare notifiche al browser per eseguire una ricarica. Ma hai bisogno di un plugin per il browser per ascoltare e fare il ricaricamento, sebbene sia possibile rinunciare al plugin usando un tag script.

Il plugin gulp-livereload riguarda solo l'implementazione del server livereload, è comunque necessario servire i file tramite un server http da gulp.

È possibile utilizzare un modulo Gulp che fa sia gulp-connect.

Tuttavia, a meno che non sia legato al fegato per qualche motivo, suggerisco di utilizzare browserync. Browsersync è una buona alternativa al livereload che aggiunge ad esempio la capacità di sincronizzare la visualizzazione tra i browser. Poiché inietta un tag script nel tuo html e ascolta su un socket non hai bisogno di alcun plugin per farlo funzionare. Funziona anche su dispositivi mobili.

Un'attività ingannevole per utilizzare browsersync potrebbe essere simile a questa. Non dimenticare di aggiungere browsersync al tuo pacchetto .JSON file di

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(); 
});