Continuiamo il nostro grugnito.
Come abbiamo fatto nella seconda parte dell'esercizio degli script NPM,
in questa seconda parte di quell'esercizio grugnito,
stiamo andando a configurare esattamente le stesse attività.
Stiamo andando a pulire la cartella di distribuzione,
copiare i font nella cartella di distribuzione,
poi faremo anche la minificazione delle nostre immagini usando imagemin,
e poi finalmente utilizzare il compito usemin per costruire e preparare la nostra cartella di distribuzione.
Continuando con il nostro esercizio,
installerò un paio di moduli grugniti.
Quindi, installiamo NPM, install-grunt-contrib-copy.
Questo è usato per copiare i file e poi grunt-contrib-clean,
e meno save-dev.
E una volta installati questi due,
allora andremo avanti e configureremo le attività corrispondenti.
Andando al tuo file grunt,
aggiungeremo la configurazione sia per la copia che per le attività pulite.
Quindi, a partire dalla virgola,
ricorda sempre di non dimenticare la virgola.
Tornerà a morderti nei momenti sbagliati, se lo fai.
Quindi impostiamo l'attività di copia.
Per la copia, usemin si aspetta che manteniamo anche i
nostri file HTML copiati nella cartella di distribuzione
in modo che possa fare la manipolazione su questo.
Quindi, in questo caso,
abbiamo intenzione di copiare prima
i file HTML dalla nostra cartella di progetto alla cartella di distribuzione.
Quindi, per fare la copia,
ho intenzione di impostare la parte HTML di esso.
Quindi, questo è dove useremo alcuni
della sintassi grunt per specificare i file che devono essere copiati.
Quindi, dico file e specifico anche le
parentesi destra, sinistra e destra lì così all'interno di questo,
ho bisogno di specificare ora certa configurazione.
Quindi, direi, espandere true e dot true, quindi CWD,
la directory di lavoro corrente è dot slash,
e poi,
configureremo il prossimo che è SRC, i file sorgente,
e poi i file sorgente sono star.html,
tutti i file HTML,
e poi li copieremo in la cartella dist.
Ecco perché la destinazione è impostata sulla cartella di distribuzione qui.
Quindi, con questo set up,
la mia attività di copia copierà tutti i file HTML nella cartella di distribuzione.
Ora insieme a questo, abbiamo anche bisogno di copiare i font.
Quindi, imposterò il secondo per i font.
Quindi, specifico i font e poi anche qui ho bisogno di specificare
i file che devono essere copiati e quindi diciamo file,
e quindi questi sono
alcuni parametri di configurazione che è necessario impostare per l'attività di copia.
Ora, se hai bisogno di capire,
quindi leggendo la documentazione per il plugin grunt corrispondente,
sarai in grado di capirlo e così o puoi
semplicemente seguire l'esempio che sto dando qui.
Quindi, punto true, e poi CWD,
la directory di lavoro corrente è moduli nodo e font impressionante.
Quindi è lì che ho intenzione di copiare i file da,
e quindi la fonte dei file è fontsstar.star,
questi sono i file che ho bisogno di copiare,
e la destinazione è la cartella di distribuzione.
Quindi con questo, ho impostato il mio compito di copia per copiare
sia i file HTML che i file dei caratteri nella mia cartella di distribuzione.
Ora, il prossimo compito che ho intenzione di impostare è il compito pulito.
Quindi, lasciami configurare l'attività pulita.
Per l'attività pulita, configurerò la build,
quindi dirò che la fonte è la cartella di distribuzione.
Quindi, specificando essenzialmente che la cartella di distribuzione deve essere pulita.
Quindi, ora abbiamo impostato la copia e le attività pulite in modo da salvare le modifiche.
Il prossimo compito che ho intenzione di impostare è l'attività imagemin.
Questo è ciò che useremo per comprimere e copiare le immagini nella cartella di distribuzione.
Per iniziare con l'attività imagemin, il primo passo,
installa il plugin grunt corrispondente.
Quindi, grunt-contrib-imagemin, meno meno save.dev.
E una volta installato,
allora andremo avanti e configureremo l'attività imagemin corrispondente.
Andando al nostro file grunt dopo la configurazione per l'attività pulita,
ho intenzione di configurare l'attività imagemin.
Quindi, dirò imagemin,
e poi proprio lì,
specificherò dinamica,
e dentro lì specificherò i file in modo da poter
vedere che la specifica del file sarebbe simile.
Direi, espandi true,
quindi CWD è la directory corrente.
Quindi la fonte dei file è imagestar.
e poi tra parentesi, tra parentesi graffe,
specifico PNG, GIF e JPG.
Quindi, essenzialmente, puoi vedere il modello globale del file qui.
Quindi dice qualsiasi
file PNG, GIF o JPG che corrisponde a questo modello e quindi
inizia punto che significa tutti i file di quel modello,
e la fonte, e la destinazione, che
ho impostato come cartella di distribuzione.
Quindi, con questo, abbiamo configurato il nostro
compito di copia, pulizia e imagemin.
Configuriamo un compito qui chiamato build.
Quindi, direi, registrare attività,
grunt registro attività e poi nominerò l'attività come build,
e poi all'interno di questo,
specificheremo i passaggi di impostazione da fare dal task di compilazione.
Quindi, proprio lì, punto e virgola e poi lì dentro,
specificerò i tre compiti nella sequenza che dovrebbero essere eseguiti.
Per prima cosa, dirò, pulito.
Quindi, puliremo la cartella di distribuzione
e quindi inizieremo a ricostruire la cartella di distribuzione.
Pulito, quindi il prossimo compito sarebbe
copia e poi dopo che lo farei, imagemin.
Quindi questi tre compiti da configurare qui.
Quindi con questo, lasciami salvare le modifiche.
Vediamo come funziona questa cosa.
Ora, andando al prompt se digito,
grugnito e costruisco, vedrai che prima farà la pulizia,
poi per fare la copia e fare l'attività imagemin.
Quindi, fa tutti questi tre e poi vedresti immediatamente che
la cartella di distribuzione è costruita nella mia cartella di progetto qui.
E all'interno della cartella di distribuzione si può vedere che i font sono stati copiati,
le immagini sono state copiate e
i tre file HTML sono stati copiati nella cartella di distribuzione.
Sei solo a meta' strada.
Ora, dobbiamo essere in grado di elaborare questi file usando il plugin usemin.
Quindi, passiamo a quello successivo.
Ora, ho intenzione di installare alcuni moduli NPM
che sono utili per costruire la cartella di distribuzione.
Quindi, per farlo, direi installazione NPM.
Posso specificare un insieme di moduli qui quindi,
direi, grunt-contrib-concat.
Quindi, questo è usato per concatenare file, quindi grunt-contrib-cssmin,
grunt-contrib-htmlmin, quindi dire, grunt-contrib-uglify.
Poi grunt-filerev.
Vedrai il motivo per usare filerev in breve tempo,
e poi grunt-usemin, e salva def e quindi
installa tutti questi moduli grunt.
Una volta che tutti sono stati installati,
il passo successivo è quello di andare a configurare,
compito usemin che utilizza anche
le attività cssmin Uglify Concat per realizzare la costruzione della cartella di distribuzione.
Ora, procediamo avanti la configurazione dell'attività usemin.
Quindi, tornando al file grunt dopo imagemin,
aggiungerò il prossimo compito affinché usemin funzioni con il grugnito.
La prima attività che ho bisogno di configurare si chiama UseminPrepare.
Questa attività UseMinPrepare preparerà i file e quindi configurerà anche
i plugin ConCache CSS min e Uglify e file ref,
in modo che possano fare il loro lavoro correttamente.
Quindi, questo è il motivo per UseminPrepare.
Quindi, questo è il modo in cui è stato progettato il plugin usemin di concessione.
Un po 'diverso dal modo in cui l'usemin che abbiamo usato con gli script del gioco finale si sveglia.
Quindi, in UseminPrepare,
solo un nome casuale che userò e quindi dirò che la destinazione è dist.
E poi specificherei la fonte come tutti i file html qui.
Quindi direi contactus.html
, aboutus.html e index.html.
Quindi, tutti e tre i file devono essere elaborati.
La parte successiva di questa configurazione usemin, la configurazione
UseminPrepare è dove specifico le opzioni.
Questo è qualcosa che ho capito per tentativi ed errori.
Segui i gradini.
Quindi ho bisogno di configurare
alcune cose qui dentro in cui ho bisogno di configurare qualcosa chiamato Flow.
E poi dentro ho bisogno di configurare un'altra parte chiamata Steps,
e poi qui specifico i passaggi qui e poi dico cssmin,
e poi dirò js è uglify.
Quindi, questo è qualcosa che devo specificare qui e poi dopo questo dico post,
e qui posso consentire a questo di fornire
alcune opzioni per i loro compiti specifici che ho configurato.
Quindi, sto fornendo alcune opzioni aggiuntive per css.
Quindi, che è fornito all'interno del post qui.
Ora di nuovo, questo è il modo in cui la configurazione deve essere fatta.
Quindi, l'abbiamo appena imparato guardando la documentazione lì.
Quindi, qui all'interno del post css,
specificherei un nome come cssmin.
Finora questo qui è compito cssmin.
Direi createConfig:
blocco di contesto della funzione, e quindi all'interno di quelle funzioni
devo fornire determinati parametri.
Quindi, direi che il
generatore di opzioni di contesto generato da var.
Quindi questa è una variabile JavaScript che ho bisogno di
specificare lì, essenzialmente l'oggetto JavaScript.
Quindi, questo oggetto contiene questa proprietà chiamata opzioni,
dove posso specificare alcune opzioni che vengono passate
nel CSS min incaricato dall'attività di preparazione usemin.
Quindi, lì dentro, mantieni
commenti speciali e poi,
rebase è falso.
Apparentemente ho bisogno di fornire questo per consentire al mio compito cssmin di gestire attualmente
la modifica e l'inclusione impressionante del font nel file concatenato.
Se non lo faccio,
sembra rompere il font fantastico e questo è qualcosa che ho capito,
facendo un po 'di
ricerca su stack overflow e alcuni di questi luoghi e ho capito
che il loro problema causato con font awesome può essere
risolto includendo questo in la mia configurazione grugnito.
Quindi, ancora una volta ho appena cercato
i suggerimenti di alcune persone che hanno provato e per risolvere il problema.
Quindi, se si incontrano problemi come questo,
questo è un modo per risolvere i problemi che potrebbero sorgere quando si
lavora con questi vari strumenti.
Permettetemi di aggiungere il prossimo compito per Concat.
Specificherò alcune cose qui e opzioni.
Specifico questo punto e virgola,
quindi questo è qualcosa che devo specificare per Concat,
e poi anche dopo
le opzioni specifico dist come vuoto.
Ora queste opzioni Concat saranno configurate da UseMinPrepare che viene eseguito in precedenza.
Quindi possiamo lasciare la maggior parte di esso vuoto lì,
e poi che sarebbe stato riconfigurato da UseminPrepare.
Il prossimo è brutto.
All' interno uglify ho solo bisogno di specificare questa dist come vuota.
Se non li specifico,
l'attività usemin non funziona correttamente.
Quindi, è per questo che ho bisogno di specificare tutte queste cose esplicitamente.
Quindi anche per cssmin direi dist vuoto.
E poi, il prossimo compito che ho intenzione di configurare si chiama filerev.
Quindi, mi hai visto installare il plugin filerev per Grunt.
Cosa fa questo filerev?
Quello che fa il filerev è quando usemin prepara il file main.css e main.js,
quello che fa filerev è aggiunge un'estensione aggiuntiva a quel nome principale, in
modo che quando prepari una nuova versione del tuo sito web e lo carichi sulla pagina web,
nel caso in cui qualcuno abbia visto il tuo sito web prima,
allora il loro browser potrebbe aver incassato i file main.css e main.js.
Se non si allega questo filerev quello che succede è che,
il browser sotto scarica la nuova versione della pagina web.
Potrebbe non scaricare il file main.js e main.css
perché li trova già nella sua cache locale.
Quindi, la tua pagina web potrebbe non essere renderizzata correttamente.
Quindi, per affrontare il problema,
quello che facciamo è ogni volta che prepariamo una nuova cartella di distribuzione,
aggiungeremo una revisione del file.
Questo è ciò che il filerev sta per,
il numero di revisione del file,
come estensione aggiuntiva al nome di quei file css e js.
Il main.ss e main.js file il pre-preparato.
Quindi questo è ciò che fa il filerev.
Ora come fa questo filerev a calcolare questo valore?
Prende il contenuto di questi file e poi fa un po 'di elaborazione e quindi genera
un md5 compresso 20 caratteri numero che verrà allegato al file principale.
Quindi, ho intenzione di configurare quella parte qui.
Quindi, nelle opzioni,
specifico qui dicendo come dovrebbe calcolare questo numero lì.
Quindi, dico codifica utf8,
e poi dico algoritmo che ha usato per calcolare questo hash,
quello che chiamiamo come hash è md5.
Ora, diventerà più chiaro quando eseguiamo effettivamente
l'attività usemin e poi vediamo cosa fa, lunghezza 20.
Quindi, tornerò e spiegherò cosa
fa questa cosa quando eseguiamo effettivamente l'attività usemin.
Quindi, lasciami finire le opzioni qui e poi direi rilascio.
Quindi, ho bisogno di impostare alcune altre cose qui e poi rilasciare,
e poi ho bisogno di specificare i file per i quali il mio filerev dovrebbe agire.
Quindi, direi file filerev.
Quindi, qui dentro il file.
Quindi, stai iniziando a vedere uno schema nel modo in cui le cose sono specificate qui.
Quindi, quando specifichi i file qui,
dirai la fonte,
e poi dentro specificherai il CSS dist
e poi il CSS del punto stella,
e poi il prossimo dist js*.js.
Quindi, con questo, hai configurato il filerev.
Quindi, la parte filerev è configurata.
E infine, abbiamo bisogno di configurare l'attività usemin.
Quindi, per configurare l'attività usemin,
vado qui e dico usemin,
e qui mi permetta di specificare alcune opzioni per l'attività usemin.
Quindi, qui specifico html.
Quindi, qui sto specificando quali file deve cambiare,
deve essere aggiornato.
Quindi, i file che sono stati copiati nella cartella di distribuzione.
E l'ultimo è «dist/index.html».
Quindi questi sono i tre file che dovrebbe elaborare,
e poi alcune opzioni per questo qui.
Quindi, le opzioni che specificherò «AssetsDirs».
Quindi, qui è dove esistono tutte le risorse che sto usando.
Quindi, esistono i file CSS e JavaScript.
Quindi, specificherò «dist/css» e «dist/js».
Con questo, hai completato la configurazione dell'attività «usemin».
Successivamente, configuriamo l'attività «htmlmin».
Per l'attività «htmlmin»,
abbiamo specificato la destinazione che è «dist», la cartella di distribuzione
e il «htmlmin» da eseguire su
tutti i file HTML che si trovano in quella cartella di distribuzione.
Le opzioni che specifichiamo per questo stato che, diremo,
«CollapsedWhitespace: True» significa che
tutto lo spazio bianco nei file HTML verrebbe compresso, in
modo che [inudibile] contenga solo il codice HTML minimo lì.
La modifica rimuove essenzialmente
tutti i caratteri estranei dai file «htmlmin».
Ora, specifichiamo anche quel dizionario di file,
quei file che devono essere configurati.
Questo è specificato come destinazione, due punti, origine.
Quindi, specifichiamo «dist/index.html»: «dist/index.html»,
il che significa che il «index.html» nella cartella di distribuzione
sarà [inudibile] e quindi rimesso nel file «index.html»,
anche nella cartella di distribuzione.
Allo stesso modo, il «contactus.html» specificato lì e poi il
«aboutus.html» anche specificato come mostrato in quell'elenco di file.
Il motivo per cui eseguiamo «htmlmin» dopo aver terminato «usemin»
è perché «usemin» sostituirà tutti gli script
con il file principale «.js» e anche tutto quel
codice CSS concatenato e combinato e sostituito con il file principale «.css».
Quindi il «htmlmin» verrà eseguito sui
file HTML risultanti dopo che «usemin» ha completato il suo lavoro.
Questo è come funziona in Grunt.
Quindi il Grunt «htmlmin» deve essere applicato dopo che il «usemin» ha completato il suo lavoro.
Quindi, una volta che tutti questi sono configurati,
allora un piccolo passo che devo fare è tornare qui,
e poi dove specifichiamo per il «jit-grunt»,
dobbiamo specificare che questo «jit-grunt»,
si ricorda che abbiamo introdotto qualcosa chiamato
«useminPrepare» [inudibile] quindi è necessario informare il «jit-grunt»
dicendo che la configurazione «UseminPrepare» che abbiamo introdotto sarà
gestita da quel plugin «grunt-usemin» stesso.
Quindi ho bisogno di specificare esplicitamente,
altrimenti «jit-grunt» si cercherà un plugin Grunt «UseminPrepare».
Quindi, per specificarlo,
direi «useminPrepare» e dire «grunt-usemin»,
essenzialmente informando «jit-grunt» dicendo che «useminPrepare» verrà
gestito dal plugin «grunt-usemin» lì.
Infine, riconfiguriamo l'attività «build» nella parte inferiore.
Scendendo a quell'attività di «build» dopo «imagemin».
Quindi abbiamo fatto «clean», «copy», «imagemin»,
quindi il prossimo compito che dovrei eseguire è «useminPrepare» e poi dopo
«useminPrepare» eseguo «contact», quindi eseguo «cssmin»,
quindi eseguo «uglify».
Quindi vedete che dobbiamo farli in una certa serie di passi.
Una volta eseguiti «cssmin» e «uglify»,
verranno creati i principali file «.css» e «.js» principali.
Quindi, a questo punto, eseguirò il
«filerev» e poi finalmente eseguo l'attività «usemin».
Quindi vedi i segreti: «pulito», «copia»,
«imagemin», «useminPrepare», «concat», «cssmin», «uglify».
A questo punto, i file «.css» e «.js»,
i principali file «.css» e «.js» sono pronti.
Posso fare il «filerev» su di loro e poi finalmente eseguire il «usemin».
Ma questo, salviamo le modifiche e poi andiamo a
vedere come l'attività «build» prepara effettivamente la distribuzione.
[ inaudible] Andando al nostro terminale,
al prompt digito «grunt build» e poi aspetto che tutti i compiti vengano eseguiti.
Quindi vedresti che verrà eseguito attraverso tutto il set di attività,
e poi finalmente quando è fatto,
sta andando semplicemente specificare che tutte le attività sono fatte.
Quindi, se vuoi tornare indietro e guardare la sequenza delle attività che sono state completate,
puoi semplicemente scorrere indietro e vedere cosa fa.
Prima pulisce,
poi copia i file HTML,
poi copia i file dei font,
poi fa l'attività «imagemin»,
poi fa «useminPrepare»,
poi fa il «concat»,
poi fa il «cssmin»,
sia la distribuzione che generata,
e poi fa il» uglify»,
quindi «uglify» compito, quindi esegue il «filerev» e poi infine l'attività «usemin».
E poi la nostra cartella di distribuzione dovrebbe ora essere pronta.
Andando al nostro editor,
ora si vede che la cartella di distribuzione è stata preparata.
Diamo un'occhiata in particolare ai principali file «.css» e «.js».
Prendere nota dei nomi di questi file.
Si noti che dopo main,
c'è un punto e poi c'è
un hash di 20 caratteri che è stato aggiunto da «filerev» qui.
Quindi, quello che succede è se preparo una nuova cartella di distribuzione,
ogni volta che preparo la nuova cartella di distribuzione, questo hash cambia, il
che significa che ogni volta che distribuisco una nuova versione del mio sito web,
se qualche browser ha precedentemente visualizzato il mio sito web allora le loro voci di cache,
dove potrebbe aver memorizzato nella cache il principale «.css» e principale «.js» è diventato
invalidato perché abbiamo una nuova versione del principale «.css» e principale «.js».
Quindi il browser scaricherà nuovamente queste cose.
Non ho mostrato il «filerev» con gli script NPM,
ma l'ho appena aggiunto qui solo per mostrarti come è fatto con Grunt.
Quindi con questo, completiamo questo esercizio.
Diamo una rapida occhiata al sito nel nostro browser.
Andando al tuo browser,
puoi vedere che ora sto caricando in «dist/index.html».
Quindi questo è dalla cartella di distribuzione,
quindi sto controllando e sembra proprio bene.
Anche il «aboutus.html» sembra proprio bene, proprio come prima.
E anche la pagina dei contatti sembra ben preparata per la distribuzione.
Quindi con questo, completiamo questo esercizio.
Dopo tutto il grugnito,
sono sicuro che devi riprendere fiato.
Prima di farlo, assicurati di fare un buon commento con il messaggio «Grunt Parte due».