Ora che abbiamo concesso abbastanza,
è ora di Gulp.
Cercheremo di eseguire lo stesso tipo di
attività che abbiamo eseguito sia con gli script NPM che con Grunt,
ma ora cercheremo di fare lo stesso usando i plug-in Gulp e Gulp.
Per iniziare, installiamo Gulp come modulo globale.
Quindi, per farlo, al prompt,
digita npm -g install gulp,
questo installerà Gulp come modulo globale e
lo renderà disponibile per l'uso sulla riga di comando.
Dopo aver completato questo,
il passo successivo è installare Gulp localmente nel nostro progetto.
Quindi, per farlo, al prompt,
digitare npm install gulp —save-dev.
Una volta completati questi due,
è il momento di andare avanti e configurare le nostre attività Gulp.
Prima di farlo, il nostro prossimo passo,
installeremo il plug-in Gulp Sass in modo che possiamo
configurare il Sass per vedere come attività di conversione nel nostro file Gulp.
Quindi, per andare avanti e farlo,
digitare npm install
gulp sass —save-dev.
Anche mentre ci siamo,
potremmo anche installare il Browser Sync Gulp Task troppo,
in modo che possiamo configurare entrambi questo uno dopo l'altro.
Quindi, installerò, npm installa browser-sync —save-dev.
Una volta che questi due sono installati,
allora andiamo avanti e creare il nostro file Gulp e quindi configurare il nostro Gulp Task qui.
Andando alla nostra cartella di progetto,
creiamo un nuovo file e poi il nome gulpfile.js,
e in questo file, stiamo andando a configurare il nostro Gulp Task.
Quindi, una volta che gulpfile.js è pronto,
configura bene le attività di Gulp qui iniziando prima
con 'use strict' e poi var gulp.
Quindi, abbiamo bisogno di richiedere i moduli del nodo gulp,
e anche mentre ci siamo,
avremo bisogno del modulo nodo sass.
Come ho accennato nell'esercizio precedente,
diventerà più chiaro per te perché il codice è scritto in questo modo,
una volta che capirai di più sui moduli dei nodi in un corso successivo.
BrowserSync, quindi quello che abbiamo fatto è quello di includere i
moduli di nodo Gulp Contrast e BowserSync nel nostro file Gulp.
E una volta fatto questo,
è il momento di configurare i nostri compiti Gulp.
Come abbiamo imparato in precedenza,
Gulp è un codice basato sul modo di configurare
le attività a differenza di Grunt che si basa più sulla configurazione delle attività.
Quindi, in caso di Gulp,
il bambino imposterà i nostri compiti per digitare
gulp.task e poi impostiamo un nome di attività 'sass',
e poi per questo compito,
lo imposteremo come una funzione,
e questo è il modo in cui viene preparato il codice.
Così, Gulp Task funzione Sass e qui,
stiamo impostando il Gulp Task,
quindi digiteremo return gulp.src ('. /css/ *.scss') Come abbiamo imparato,
Gulp è uno strumento basato sul codice sopra la configurazione.
Quindi, prepareremo questo compito in quanto tale.
Così, si vede che abbiamo specificato Gulp sorgente pipe sass su,
e poi qui, errore.
Quindi, se si verifica un errore,
useremo il modo Sass per registrare l'errore e quindi reindirizzare questo
tramite gulp.dest ('. /css '), e che
completa la configurazione dei compiti Gulp Sass.
Ti starai chiedendo perché scriviamo il codice in questo modo.
Dice fonte di gulp e poi specificare qualcosa lì,
e poi il prossimo dice pipe e poi il prossimo dice pipe.
Capiamo il modo Gulp di fare le cose in modo un po 'più dettagliato.
Per spiegare perché configuriamo Attività come questo,
ho una spiegazione di ciò che chiamiamo Gulp Streams.
Il modo in cui Gulp funziona è come se prendessi un insieme di file e specifichi il set
di file dicendo gulp source come abbiamo fatto con i compiti Sass lì.
Quindi qui, questa è la funzione che prende i file. È
anche possibile specificare i file utilizzando i modelli globbing che abbiamo imparato in Grunt,
e quindi crea un flusso di oggetti che rappresenta questi file.
Ora, una volta creato il flusso,
allora il flusso può essere convogliato attraverso un insieme di
funzioni una dopo l'altra per trasformare questi file.
E infine, i file trasformati risultanti possono essere inseriti in una posizione di destinazione.
Ecco perché specifichiamo sorgente Gulp,
quindi specifichiamo pipe.
Quindi, il tubo permette al flusso di essere convogliato attraverso una funzione,
e così, è per questo che abbiamo detto dot pipe,
e poi abbiamo detto gulp.
E poi abbiamo detto «sass on error».
E poi il prossimo dice Pipe Gulp Dest.
E così, il gulp dest specifica la destinazione dei file che sono stati elaborati.
Quindi, è così che un compito tipico è specificato in gulp perché gulp opera sui flussi.
Quindi, i file di flusso attraverso i tubi fino a quando non
vengono trasferiti e quindi verranno depositati nella destinazione specificata.
Quindi, vedrai una struttura simile per molte delle attività gulp che
configureremmo in questo esercizio e nell'esercizio successivo.
Ora che hai capito un po 'su come gulp funziona con i flussi e come
l'attività gulp utilizza la pipe per elaborare i file attraverso un set di funzioni,
e diventa più chiaro per te perché abbiamo impostato questo compito sass come visto in questo codice qui.
Il prossimo compito che ci accingiamo a configurare si chiama gulp,
e configureremo questa attività come orologio sass.
Quindi, questo è un compito di orologio che stiamo per configurare,
e quindi si dovrebbe specificare la funzione.
E così qui,
il compito di Gulp Sass Watch,
quello che facciamo è specificare i file che stiamo andando a guardare.
Quindi, usiamo il compito Gulp Watch per guardare il file.
Quindi, l'orologio è già integrato nel gulp.
Quindi, ci vorrà guardare gulp e poi specifichiamo i file lì*.SCSS.
Quindi, come puoi vedere, l'orologio gulp guarderà
questi file e poi quando si verificano eventuali modifiche a questi file,
allora eseguirà quel compito sass,
che abbiamo specificato in precedenza.
Quindi, questo è il modo in cui viene impostato il compito di Sass Watch.
Ora che abbiamo fatto questi due,
cerchiamo di impostare che l'attività di sincronizzazione del browser successivo.
Quindi, chiuderlo con il punto e virgola e poi l'
attività successiva che imposteremo è l'attività di sincronizzazione del browser.
Quindi, specificherò l'attività di sincronizzazione del browser lì.
E poi per l'attività di sincronizzazione del browser,
specificherò quella funzione.
Ancora una volta, nota la struttura in cui scriviamo il codice, l'
attività gulp e quindi specifichi qualcosa che segue ma con una funzione.
Ora di nuovo come ho detto,
impariamo i moduli nodo nell'ultimo corso di questa specializzazione,
diventerà più chiaro a voi perché non i moduli scritti con questa struttura,
e perché le funzioni sono scritte in questo modo.
Quindi, diciamo gulp sincronizzazione del browser attività.
Qui, definirò una variabile,
una variabile JavaScript chiamata file,
che non è altro che in array,
e che all'interno di quegli array di file specificherei tutti i file che,
se modificati, la sincronizzazione del browser deve
causare il ricaricamento o il file.
Quindi, i file html, i file CSS nella cartella CSS,
e quindi allo stesso modo guarderò anche i file di immagine
e i file JavaScript.
Tutti questi file se qualcuno di loro cambia.
Quindi, dopo questo, configurerò la sincronizzazione del browser qui.
Quindi, dirò la sincronizzazione del browser.
Abbiamo già definito questa variabile chiamata sincronizzazione browser in precedenza.
Quindi, dobbiamo inizializzare la sincronizzazione del browser,
e quindi, il primo parametro a questo
è i file che dovranno essere guardati,
e quindi il secondo parametro specifica le opzioni che stiamo dando al browser.
Quindi, l'opzione che sto specificando è per il server.
Specificherò la directory di base come directory corrente
e quindi completerà la specifica dell'attività di sincronizzazione del browser.
Quindi, con questo, abbiamo completato specificando l'attività di sincronizzazione del browser qui.
Così, si può vedere che come abbiamo configurato attività di sincronizzazione del browser,
abbiamo specificato i file e quindi salvare la
sincronizzazione del browser in esso e fornire i file come primo parametro.
Il secondo parametro sono le opzioni per il plugin di sincronizzazione del browser.
Poi, infine,
programmeremo o configureremo l'attività chiamata default.
Proprio come me ho l'attività predefinita in Grunt,
possiamo anche avere un compito predefinito simile definito per gulp.
Quindi, qui diciamo gulp task default sincronizzazione del browser,
e quindi specificare la funzione.
E dentro lì specificheremo l'inizio del gulp.
Quindi, questo specifica che dovrei iniziare
questo altro compito che sass watch task. Il compito orologio sass deve essere avviato.
Assicurarsi che l'attività di sincronizzazione del browser sia in esecuzione prima dell'avvio dell'attività di sass watch.
Quindi, questa è la sintassi per specificarlo in gulp.
Quindi, con questo, abbiamo configurato tutto ciò di cui abbiamo bisogno nel file gulp.
Quindi, tornando indietro,
ci sono passi che abbiamo fatto.
Abbiamo usato prima richiedono di includere tutti i loro plugin gulp lì,
poi abbiamo configurato l'attività sass,
e quindi specificato attività orologio sass.
Questo è dove usiamo l'orologio gulp che è a nostra disposizione come da gulp.
Poi abbiamo specificato l'attività di sincronizzazione del browser e poi infine
riprogrammare l'attività predefinita con il browser Sync e il gulp iniziare con sass watch.
Ora, vediamo le modifiche,
e poi andremo avanti ed eseguire il file gulp add,
e il prompt tipo gulp.
Vedrai che gulp si avvia con la sincronizzazione del browser e l'avvio dell'attività di sass watch,
e quindi la sincronizzazione del browser inizierà a servire i file.
Se visualizzi il tuo sito web utilizzando un browser,
sarai in grado di vedere il sito web che viene servito nel browser.
Permettetemi di illustrare anche il funzionamento dell'attività di vigilanza.
Quindi, tirerò su style.css e
cercherò solo di salvare la modifica e noterai che sul lato sinistro,
l'attività sass viene immediatamente invocata e
ricompilerà il file style.scss nei file CSS.
E poi quel browser si ricaricherà a questo punto.
Con questo completiamo la prima parte dell'esercizio del sorso.
Nella seconda parte, prepareremo la cartella di distribuzione.
Questo è un buon momento per fare un git-commit con il messaggio Gulp parte 1.