Share
Nell'ultima lezione hai imparato come compilare o creare l'intero progetto con comandi brevi come grugnito, orologio da grugnito, sorso e gulp watch.
In questa lezione imparerai come creare comandi che aggiungono un livello extra di fantastico ai tuoi progetti, abilitando il live ricaricamento e la sincronizzazione del browser.
Se non hai ancora completato gli altri tutorial di questa serie, torna indietro e completa quelli prima di iniziare da qui.
Nota: Per evitare confusione, c'è un'app desktop e una combinazione di plug-in di Chrome denominata LiveReload che viene spesso utilizzata in combinazione con molti pacchetti npm per gestire il ricaricamento automatico. Tuttavia, con il modo in cui effettueremo la configurazione, le app desktop e il plug-in del browser non saranno necessari.
Per consentire il live ricaricamento ci deve essere un localhost che può essere aggiornato, ovvero un modo per visualizzare il tuo sito localmente simulando un host web con un http: // protocollo invece di file://.
Con il tuo progetto Grunt ci occuperemo di abilitare un localhost a servire i file statici del tuo progetto e di vivere il ricaricamento di quel localhost, usando il plugin grunt-express.
Installa grunt-express nel tuo progetto con:
installare npm grunt-express --save-dev
Quindi abilita il plugin nel tuo Gruntfile aggiungendo questo sotto il tuo esistente grunt.loadNpmTasks Linee:
grunt.loadNpmTasks ( 'grunt-express');
Configura l'attività Express aggiungendo questo codice:
express: all: options: bases: 'build', livereload: true, open: 'http: // localhost: 3000',
Lo noterai nel nostro esprimere configurazione del compito abbiamo il livereload opzione impostata su vero, quindi, dopo l'avvio dell'anteprima locale, verrà ricaricato automaticamente ogni volta che vengono rilevate modifiche.
Ora aggiungeremo una nuova attività chiamata inizio. Useremo questa attività per attivare entrambi esprimere compito e il orologio compito subito.
Aggiungi questo sotto il tuo esistente grunt.registerTask linea:
Accentsconagua
grunt.registerTask ('start', ['express', 'watch']); Ora esegui il comando:
inizio grugnito
... e dovresti vedere il tuo browser predefinito aperto con l'anteprima del tuo progetto visualizzata all'interno.
Il orologio il task è ora in esecuzione e compilerà le modifiche Stylus e Jade nella cartella "build".
Express controlla a sua volta la cartella "build" per eventuali modifiche, quindi se i tuoi file HTML, CSS o JS vengono ricompilati ricaricherà automaticamente la tua anteprima.
Avanti andremo avanti e raggiungeremo lo stesso tipo di anteprima localhost nel tuo progetto Gulp. Questa volta utilizzeremo il plugin gulp-connect.
Installa gulp-connect nel tuo progetto con questo comando:
Installa npm --save-dev gulp-connect
Rendilo accessibile nel tuo Gulpfile aggiungendo questa linea sotto le altre linee in cui hai usato il richiedere() funzione:
var connect = require ('gulp-connect'); Imposta una nuova attività chiamata Collegare aggiungendo questo codice sotto l'altro codice attività:
gulp.task ('connect', function () connect.server (root: 'build', livereload: true, open: true););Come abbiamo fatto con Grunt, ora creeremo un task personalizzato chiamato inizio che lancia entrambi la nostra anteprima localhost e avvia la nostra attività di sorveglianza.
Aggiungi questa linea alla fine del tuo Gulpfile:
gulp.task ('start', ['connect', 'watch']);Per abilitare il ricaricamento dell'anteprima localhost, collegheremo un altro "pipe" alla fine di entrambi css e html compiti.
Aggiungi questo trigger reload alla fine di ogni:
.tubo (connect.reload ())
Rendere i compiti diventare:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rinomina ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));… e:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe (connetti. reload ()));Ora esegui il comando:
inizio gulp
... quindi vai a http: // localhost: 8080 e vedrai l'anteprima del tuo sito locale.
Salva una modifica a uno dei tuoi file Jade o Stylus e guarda il fulmine velocemente ricompilare e ricaricare!
Ora che l'anteprima dell'host locale viene ricaricata automaticamente, puoi lasciarla e avere comunque una configurazione di processo di sviluppo di prim'ordine per il tuo progetto. Tuttavia, quando si tratta di essere in grado di eseguire cross-browser e cross-test, anche avere BrowserSync nell'immagine vale davvero la pena.
Con BrowserSync ti viene fornito un URL di anteprima che puoi collegare a qualsiasi browser sulla tua macchina, così come i browser su qualsiasi altro dispositivo sulla stessa connessione Internet.
Tutte le anteprime che hai eseguito verranno quindi ricaricate mentre apporti le modifiche in modo da poter vedere i risultati su tutta la linea e tutte le tue interazioni verranno replicate su ogni istanza. Se scorri o apri un menu su un browser, vedrai come ogni altro browser e dispositivo risponde allo stesso tempo.
Per installare il plugin di sincronizzazione grunt-browser nel tuo progetto Grunt, esegui il seguente comando:
installa npm grunt-browser-sync --save-dev
Commenta o cancella la riga che hai usato per abilitare grunt-express:
// grunt.loadNpmTasks ('grunt-express');Quindi aggiungi questa riga per abilitare invece la sincronizzazione con grunt-browser:
grunt.loadNpmTasks ( 'grunt browser-sync');
Commenta o elimina il esprimere attività creata in precedenza e aggiungere questo codice di configurazione per l'attività browserSync anziché:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], opzioni: watchTask: true, server: baseDir: "build",
Trova il tuo inizio compito e cambiarlo in modo che esegua il browserSync compito invece del esprimere compito, da:
grunt.registerTask ('start', ['express', 'watch']);… a:
grunt.registerTask ('start', ['browserSync', 'watch']);Ora quando esegui il comando:
inizio grugnito
... vedrai comunque un'anteprima dell'host locale che verrà ricaricata quando salvi le modifiche, ma la differenza ora è che la sincronizzazione del browser è attiva così come la possibilità di visualizzare l'anteprima su altri dispositivi.
Nel terminale dopo aver avviato il tuo server BrowserSync vedrai questo:
- Locale: http: // localhost: 3000 Esterno: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI Esterno: http://192.168.1.3:3001 -
Prendi l'indirizzo etichettato Locale, inseriscilo in altri browser sulla tua macchina e inserisci l'indirizzo etichettato Esterno in tutti gli altri dispositivi hai condiviso la stessa connessione. Quindi guarda le risposte sincronizzate che ricevi in tutte le istanze mentre interagisci con qualcuno di loro.
Per maggiori informazioni su BrowserSync via Grunt vai su: http://www.browsersync.io/docs/grunt/
Ora configureremo lo stesso processo, questa volta utilizzando il plug-in di sincronizzazione del browser per Gulp.
Installa il plugin nel tuo progetto Gulp con:
npm installa gulp browser-sync --save-dev
Commenta o cancella questa riga:
// var connect = require ('gulp-connect');... e sostituirlo con:
var browserSync = require ('browser-sync');Commenta o elimina l'esistente Collegare compito e aggiungere questo nuovo browser sync compito invece:
gulp.task ('browser-sync', function () browserSync (server: baseDir: "build"););Alla fine delle attività css e html, individua i due punti in cui hai aggiunto la riga:
.tubo (connect.reload ())
... e sostituisci ciascuna di queste due righe con:
.tubo (browserSync.reload (flusso: true))
E finalmente localizza il tuo esistente inizio attività e modificarlo per eseguire il browser sync compito invece del Collegare compito, sostituendo questo:
gulp.task ('start', ['connect', 'watch']);… con questo:
gulp.task ('start', ['browser-sync', 'watch']);Ora quando esegui il comando:
inizio gulp
... una finestra del browser si aprirà con la tua anteprima al suo interno. Proprio come quando hai usato BrowserSync via Grunt, gli URL di anteprima ora si sincronizzeranno su qualsiasi browser su qualsiasi dispositivo che scappa dalla tua connessione Internet.
Per maggiori informazioni su BrowserSync tramite Gulp visita: http://www.browsersync.io/docs/gulp/
Ora hai passato tutto il necessario per configurare da zero i tuoi progetti per sfruttare la linea di comando durante lo sviluppo. Ma che dire quando non vuoi ripartire da zero. Che dire quando si desidera utilizzare i framework di terze parti esistenti, o se si vuole solo iniziare?
Nel prossimo tutorial imparerai come utilizzare la riga di comando per eseguire il ponteggio di progetti completamente nuovi in pochi istanti, completo di tutto il codice di terze parti di cui hanno bisogno, nonché della gestione delle attività di Grunt o Gulp, tutti pronti per l'installazione.
Ci vediamo nel prossimo tutorial!
