Ora è il momento di passare alla seconda parte dell'esercizio Gulp.
Continueremo a eseguire passaggi simili a quelli
della seconda parte dell'esercizio di script NPM e dell'esercizio corrente.
Quindi, organizzeremo l'eliminazione della cartella di distribuzione e copieremo i font,
quindi ricostruiremo anche la cartella di distribuzione,
usando moduli di nodo simili a
quello che abbiamo usato per Grant e anche gli script NPM.
Il nostro prossimo passo è quello di impostare le attività per
l'eliminazione della cartella di distribuzione e anche la copia dei caratteri nella cartella di distribuzione.
Quindi impostiamo alcuni moduli nodo.
Il primo che imposteremo si chiama del.
Questo modello di nodo consente di eliminare una cartella.
E andiamo avanti e prepariamo i compiti del Gulp.
Con Gulp, fortunatamente, non abbiamo bisogno di installare un altro modulo per copiare
perché i flussi Gulp ci permettono di fare la copia dei file con poco sforzo.
Andando al file Gulp,
ho intenzione di introdurre il modulo misto Gulp,
che dirò, del.
E poi richiedere il modulo del qui.
Quindi una volta che abbiamo bisogno del modulo del lì,
possiamo andare avanti e impostare i compiti.
Quindi, imposteremo prima il compito pulito qui.
Quindi subito dopo l'attività predefinita,
ho intenzione di impostare l'attività pulita.
Quindi dirò, compito Gulp pulito.
E come puoi vedere,
questo è impostato come la funzione lì.
E dentro che diremo, ritorno del.
E poi il parametro fornito è la cartella di distribuzione qui.
Quindi questo imposterà l'attività pulita.
E una volta eseguita questa attività
, la cartella di distribuzione verrà eliminata.
Il nostro prossimo compito è copiare i font nella loro cartella di distribuzione.
Quindi, direi, copia i font.
E come puoi vedere,
impostiamo la funzione lì e quindi chiudiamo la funzione.
E poi qui, direi semplicemente,
moduli sorgente e nodo Gulp, font impressionante, font.
Puoi vedermi usare gli schemi del globbing, proprio li'.
E poi una volta selezionati tutti i file sorgente,
li reindirizziamo nel file di destinazione.
Quindi, si nota che non abbiamo bisogno di
un modulo specifico per organizzare la copia dei file.
Usiamo semplicemente i flussi di origine e destinazione Gulp per essere in grado di
reindirizzare i file dalla posizione di origine alla posizione di destinazione.
Quindi, questi due imposteranno l'attività clean e copy font.
Successivamente, abbiamo intenzione di impostare il modulo NPM per l'attività imagemin.
Quindi la minimizzazione e la compressione delle immagini.
Quindi, per farlo aggiungi il prompt tipo Gulp imagemin.
Questo è il plugin Gulp corrispondente al modulo del nodo imagemin.
Così abbiamo installato come plugin Gulp,
che è anche modulo nodo.
Quindi, una volta completata l'installazione,
impostiamo l'attività imagemin.
Andando al nostro file Gulp,
imposteremo l'attività imagemin qui.
Quindi imposteremo l'attività imagemin come funzione.
Come puoi vedere, la strutturazione del codice per
la definizione dell'attività Gulp è praticamente standard.
Quindi, si direbbe fonte Gulp.
Specifichiamo i file sorgente lì e i file sorgente
nella cartella immagine i
file JPG, GIF e PNG da lì.
E poi li reindirizza attraverso l'attività imagemin.
E poi imposterò alcuni parametri qui.
Quindi, imposterò
il livello di ottimizzazioni a tre, progressivo come vero.
Quindi, questo li trasformerà in immagini progressive e interlacciate.
Quindi, una volta impostato questo,
il passo successivo è quello di reindirizzarli alla loro destinazione.
E la destinazione qui come puoi vedere è la cartella immagine nella cartella di distribuzione.
Quindi con questo l'attività imagemin è ora impostata.
Ora, costruiremo il compito di costruzione qui.
Quindi, lasciami impostare l'attività di compilazione.
Quindi, per la compilazione dell'attività,
quello che vorresti fare è
eseguire prima l'operazione pulita prima che
vengano eseguite le attività rimanenti
perché vogliamo prima pulire la cartella di distribuzione.
E questo deve essere completato prima che i compiti rimanenti siano fatti.
Con Gulp, le attività vengono eseguite automaticamente in parallelo.
E così può accadere che
se si esegue l'attività pulita in parallelo con l'attività rimanente,
l'attività pulita potrebbe finire più tardi e
quindi eliminare parte del lavoro che è stato fatto dalle attività rimanenti.
Quindi, ecco perché quando specifichi l'attività Gulp,
se specifichi clean come primo in,
come secondo parametro qui,
significa che quell'attività verrà completata per prima.
E poi verranno eseguiti i compiti rimanenti.
Quindi, direi che inizia Gulp.
Con l'inizio Gulp,
tutte le attività che specifichiamo qui verranno eseguite in parallelo.
Quindi, eseguirò l'attività di copia dei caratteri e anche l'attività imagemin insieme.
Più tardi, imposteremo l'attività usemin e quindi
eseguirla anche insieme ai caratteri di copia e imagemin.
Un' ultima cosa che devo aggiungere prima di andare avanti ed eseguire
i compiti è andare qui e poi richiedere l'imagemin.
Direi che imagemin richiede Gulp imagemin.
E poi salvare le modifiche.
Andiamo avanti e controllare l'attività di compilazione.
Al prompt, se il tuo tipo Gulp build,
allora dovrebbe eseguire tutti e tre i compiti.
Quindi vedrai che avvia l'attività pulita e la
completa e quindi avvia l'attività di compilazione effettiva.
Quindi, puoi vedere che specificando
la pulizia deve essere completata prima
che la build effettiva avvenga, quindi assicurati di pulire prima la cartella di distribuzione
quindi l'attività di compilazione che comprende i caratteri
di copia e l'imagemin, tutti completati in parallelo verranno eseguiti da allora in poi.
Andando all'editor,
vedrai che nella cartella di distribuzione,
vediamo che i font sono stati copiati e le immagini sono state copiate correttamente.
L' ultimo passo è quello di impostare l'attività usemin al fine di costruire la cartella di distribuzione.
Per impostare loro compito usemin,
ho intenzione di installare alcuni plugin Gulp quindi direi installazione NPM.
E poi installerei il plugin di file uglify Gulp,
che ovviamente è anche un modulo nodo.
E poi installerò il modulo del nodo usemin e poi il modulo del nodo rev.
Il modulo del nodo di rev Gulp è come il file graph rev grant plugin che abbiamo visto in precedenza.
È leggermente diverso dal file rev che abbiamo visto in precedenza,
ma ha lo stesso scopo.
Quindi, Gulp rev, quindi imposterò Gulp pulito CSS e poi Gulp flatmap.
Vedrete la ragione di questo come no-
Abbiamo impostato il nostro compito usemin, così,
e gulp-html min e andiamo avanti e installare questi moduli qui.
Una volta che i moduli sono installati,
andiamo avanti e richiedere questi moduli nel nostro gulpfile e poi impostare il compito usemin.
Andando al nostro gulpfile proprio in alto,
ho intenzione di richiedere i moduli che ho appena installato.
Quindi, l'uglify gulp uglify uglify.
Quindi il compito uglify poi
l'attività usemin gulp usemin,
poi dopo che
il rev poi,
dimenticato lì, virgola lì.
Fai molta attenzione a non perdere queste virgole lì.
Quindi richiedi gulp clean-css, quindi flatmap e htmlmin.
Quindi questi sono i moduli gulp
che abbiamo installato,
quindi salviamo le modifiche e poi andremo giù e impostiamo l'attività usemin.
Venendo in fondo al gulpfile,
proprio lì imposterò l'attività usemin.
Quindi, cosa fa il compito di usemin?
Quindi l'attività usemin prende
i file htmle quindi cerca i blocchi CSS e JavaScript nei file
html, combina, concatena e minializza e annulla i file e poi
li sostituisce utilizzando il file concatenato nella cartella di distribuzione.
Quindi, per iniziare,
inizierei specificando la fonte di gulp.
Allora, dove sono i file sorgente?
Quindi i file sorgente sono i file htmlnella cartella corrente.
Quindi sorseggia. /start.html, quindi ho intenzione di
reindirizzare questo gulpfiles attraverso questo modulo gulp chiamato come flatmap.
Cosa fa flatmap?
Flatmap prende questi più file htmle quindi
avvia pipeline parallele per ciascuno di questi file html.
Ognuno di loro passa attraverso lo stesso insieme di passaggi e poi, infine,
convergendolo e copiandolo nella cartella di destinazione.
Quindi, come puoi vedere nella nostra cartella corrente,
abbiamo contactus.html, aboutus.html e index.html.
Tutti e tre devono essere elaborati.
Quindi, la flatmap ci permette di elaborarli in parallelo,
avviando lo stesso set di pipe per ciascuno di questi file,
quindi è per questo che sto facendo uso della flatmap lì.
Quindi, flatmap, e poi all'interno della flatmap ho bisogno di specificare la funzione,
i due parametri; stream, file.
Quindi, il file prende fondamentalmente ognuno di quei file sorgente che abbiamo specificato lì,
e quindi li tratta allo stesso insieme di funzioni qui,
e quindi avvia il suo flusso separato per ciascuno di essi.
Quindi, restituirò lo stream,
e poi reindirizzerò ciascuno di questi
attraverso l'attività usemin che si
compone del css
e uglify JavaScript e task html.
Quindi per il css, eseguirò la parte di revisione.
Quindi la parte css ovviamente eseguirà la concatenazione e la minificazione e così via,
e quindi applica il rev a quello in modo che agisca
quella stringa a 20 bit al file main.css lì.
Quindi per css l'ho impostato,
e poi per html,
perché ho più file html,
ho bisogno di specificarlo come funzione,
e all'interno di questa funzione direi restituire htmlmin.
E poi dentro lì gli darò il parametro CollapseWhitespace,
e quel parametro sarebbe impostato su true.
E così questo essenzialmente completa la parte html di esso.
E poi il prossimo è la parte js di esso,
la parte JavaScript di esso,
che ho bisogno di fare l'uglify e poi la revisione per esso.
E poi,
se ho un codice javascript in linea, ho bisogno di applicare
l'attività uglify per questo,
e quindi per il codice inlinecss,
userò l'attività CleanCSS lì con concat come parametro lì.
Quindi con questo, ho impostato il mio compito usemin.
Quindi si occuperà di tutte queste diverse azioni a mio nome.
E poi una volta terminati,
i flussi risultanti verranno
reindirizzati alla cartella di distribuzione.
Quindi con questo, l'attività usemin è ora tutto impostato.
Lasciate che salvi le modifiche.
E poi andrò giù all'attività di compilazione e poi dopo imagemin
aggiungerò anche usemin come una delle attività da eseguire dall'attività di compilazione.
Quindi, con queste modifiche, quindi,
abbiamo modificato l'attività di compilazione,
andiamo avanti e quindi controllare se la cartella di distribuzione è costruita correttamente o meno.
Andando al prompt, lasciami digitare gulp
build e quindi attendere che gulp costruisca tutte le diverse attività.
Ci vorrà un po 'di tempo perché l'usemin completi il suo lavoro,
e quando avrà finito di completare la trasformazione,
allora la mia cartella di distribuzione dovrebbe ora essere pronta per essere visualizzata.
Andando all'editor è ora possibile vedere che la cartella di distribuzione è stata
preparata qui e si può vedere l'indice, contactus e aboutus.htmlfile.
Puoi vedere che quando apri il file index.html,
è stato compresso.
E l'htmlmin è stato fatto,
in particolare nota come il file css è stato sostituito
con css/main- e poi vedrai una lunga stringa there.css.
Quindi questo è proprio come il file rev che hai visto in grugnito con il modulo gulp rev,
questo è ciò che fa al nome del file.
Quindi, se guardi il css puoi vedere che il nome del file è il trattino principale e
poi qualche stringa lì dot css e allo stesso modo per il javascriptfile.
Quindi, questo è ciò che fa il modulo gulp rev,
e poi tutti questi tre file sono preparati.
Diamo un'occhiata a questi file nel browser.
Andando al browser posso vedere che i file sorgente vengono salvati correttamente.
Fammi controllare la cartella di distribuzione.
Quindi nella cartella di distribuzione,
il index.html che è stato preparato
dall'attività di build gulp sembra funzionare correttamente.
Permettetemi di controllare anche la pagina su,
e possiamo vedere che su pagina è anche costruito correttamente,
e anche la pagina di contatto.
Quindi ora puoi vedere che il nostro compito di sorso è completato.
Quindi con questo, completiamo questo esercizio.
In questo esercizio, abbiamo impostato la pulizia e
la copia dei file dei font nella nostra cartella di distribuzione,
abbiamo fatto l'attività imagemin e infine abbiamo impostato
l'attività usemin per costruire la nostra cartella di distribuzione.
Con questo completiamo questo esercizio.
Questo potrebbe essere un buon momento per fare un buon commento con il messaggio Gulp parte due.