[MUSICA]
Continueremo il nostro viaggio con gli script NPM in questo prossimo esercizio.
Qui, stiamo andando a imparare come essere in grado di costruire
una cartella di distribuzione che contiene tutti i file per il
nostro progetto che possiamo semplicemente distribuire su un server web che ospita il nostro sito web.
Quindi, dati i file HTML, CSS e JavaScript che
abbiamo già preparato nella nostra cartella del progetto, stiamo andando, da quelli,
elaborarli utilizzando i vari compiti di cui abbiamo parlato.
Questo sta facendo una modifica CSS,
concatenazione e uglification JavaScript, minification
e minification HTML e
quindi generare una cartella di distribuzione con tutti i file.
Ma essenzialmente forma l'insieme di file che possono essere
distribuiti sul nostro server web che ospita il nostro sito web.
Per aiutarti a capire cosa faremo in questo particolare esercizio,
come notiamo dalla nostra pagina index.html, abbiamo un insieme di
file CSS che hai incluso qui usando questo tag link qui.
Analogamente, si dispone di un set di script che è stato incluso
nella parte inferiore di questa pagina utilizzando il tag script.
Abbiamo incluso un insieme di codice JavaScript.
Ora, quello che faremo in questo esercizio è quello di combinare tutti questi
file in un unico file JavaScript che verrà consegnato
dal nostro server web a un browser che sta cercando di visualizzare il nostro sito web.
In questo modo, minimizziamo il numero di download che il browser deve fare
per rendere il nostro sito web.
Allo stesso modo, stiamo andando a combinare tutto il codice CSS in un unico file CSS, in
modo che possa essere consegnato.
Quindi il file CSS combinato conterrà tutto il codice per
Bootstrap più Bootstrap social, e anche il Font Awesome e
anche il codice CSS che noi stessi abbiamo scritto.
Allo stesso modo, ci sarà un singolo file
JavaScript che conterrà il Tether jQuery, Bootstrap e il codice JavaScript che
noi stessi abbiamo scritto, tutti combinati insieme in un unico file.
Ora, questo è il modo in cui è possibile eseguire la distribuzione delle pagine web.
E invece di avere più file di questo tipo, un modo in cui la
distribuzione è fatto è quello di combinarli in un singolo file in modo che un singolo download
si ottiene tutto il codice JavaScript necessario per il rendering della pagina web.
Un singolo download si ottiene tutto il codice CSS necessario per
il rendering della vostra pagina web.
E poi, ovviamente, il file HTML stesso verrà scaricato.
Per ottenere queste attività da completare, abbiamo bisogno di utilizzare
un certo insieme di moduli NPM per realizzare questo.
Ora, quello che finiamo per fare è quello di costruire una cartella
nel nostro file di progetti, e poi chiamiamo quella cartella come dist, D-I-S-T.
Lo sto solo chiamando casualmente come una cartella dist.
Nel mio caso, quello che intendo con la cartella dist è una cartella di distribuzione.
Alla fine della serie di passaggi che stiamo per fare, questa cartella conterrà tutti
i file che possono essere semplicemente copiati sul server web che ospita il nostro sito web.
Per iniziare, quello che faremo è impostare
qui un set di script che ci aiuteranno ad automatizzare questo processo.
Quindi, prima cosa, potremmo
preparare la cartella di distribuzione una volta allora forse potremmo fare alcune modifiche
ai nostri file sorgente allora potremmo aver bisogno di ricompilare la nostra cartella di distribuzione.
Primo passo, avremmo impostato lo script per la pulizia di quella cartella di distribuzione che
significa essenzialmente, eliminare la cartella di distribuzione.
Quindi, per farlo, ho intenzione di prendere l'aiuto di un modulo NPM chiamato come rimfraf.
Quindi installerò npm —save-dev rimfraf.
Questo modulo ci aiuta a pulire completamente una cartella.
Quindi, una volta installato questo, imposterò uno script
nel mio file package.json per pulire tutti i file.
Andando al file package.json, ho intenzione di aggiungere, quindi
ricorda sempre che il coma è molto, molto importante in quegli script.
A volte ti imbatterai in problemi solo perché hai dimenticato la virgola.
Quindi assicurati di mettere quelle virgole dove necessario.
La prossima descrizione che aggiungerò è, pulita,
ovviamente come suggerisce il nome, questo sta per pulire la mia cartella.
Quindi dirò rimraf dist.
Ciò significa che questo, una volta eseguito,
pulirà la cartella di distribuzione.
Quindi lo aggiungerò, e
poi metterò quella virgola lì perché aggiungerò più script sotto questo.
Quindi lasciami salvare le modifiche, il prossimo passo che farò è
installare un modulo npm chiamato copy files che vengono utilizzati per copiare
alcuni file di carattere dalla mia cartella dei moduli nodo nella mia cartella di distribuzione.
In modo che quando viene distribuito, anche i file di carattere vengono distribuiti.
Andando al terminale, il prossimo pacchetto che installerò è
npm -g, ricorda che questo significa che dovrebbe essere installato globalmente.
Dal momento che lo sto facendo su un Mac,
dovrei dire sudo npm -g, se lo stai facendo su Windows, non hai bisogno del sudo.
sudo npm -g installa i file di copia.
E poi una volta installato, questo modulo NPM mi aiuterà a copiare
i file da una cartella a un'altra cartella.
Ora, lasciatemi introdurre un altro script NPM qui.
Andando al mio file package.json,
ho intenzione di creare un nuovo script qui nome copyfonts.
Questo script mi permetterà di copiare tutti i file di font dalla mia cartella
Font Awesome nella mia cartella di distribuzione.
In modo che quando il mio sito web viene reso,
tutti questi file di font possono essere inviati anche, in modo che le
mie pagine web siano renderizzate correttamente con i font Font Awesome in posizione.
Quindi, per farlo, dirò, copia i file -f,
-f significa semplicemente copia i file senza il pieno di gerarchia e
copia semplicemente i file da una posizione a un'altra posizione.
Quindi dirò copia i file -f
node_modules/font_awesome/fonts/star
E dist/font,
E poi salva le modifiche.
Lasciatemi ora illustrare come questi due script npm funzionano insieme.
Andando alla mia finestra di comando, digiterò
npm run copyfonts.
Quando questo viene eseguito, creerà una cartella
denominata dist nella gerarchia delle cartelle del mio progetto.
E poi all'interno della dist,
ci sarà una sottocartella denominata font, che conterrà i file dei font.
Quindi eseguendo questo,
noterai immediatamente che la cartella di distribuzione viene creata qui.
E all'interno della cartella di distribuzione,
puoi vedere che c'è una sottocartella denominata font.
E lì dentro, tutti i file fontawesome sono stati copiati.
Questo è il modo in cui funziona lo script copyfonts.
Ora, vi mostrerò come funziona la sceneggiatura pulita.
Quindi se digito npm run clean, questo cancellerà quella cartella di distribuzione.
Quindi, quando lo eseguo, noterai che
la cartella di distribuzione viene eliminata dalla gerarchia delle cartelle dei miei progetti.
Quindi è così che funziona la pulizia.
Ora che abbiamo questi due script impostati,
ora dobbiamo essere in grado di costruire i file di distribuzione rimanenti.
Nella fase successiva, installeremo un modulo nodo chiamato imagemin-cli,
che è l'interfaccia a riga di comando per il modulo imagemin.
Il modulo imaginemin prenderà una setta di file immagine e li comprimerà.
Così impilato la dimensione di quei file sono ridotti al minimo, per quanto possibile,
ma ancora essere renderizzati correttamente quando il nostro sito web viene reso.
In questo modo, ridurremo la quantità di dati che
devono essere scaricati dal browser quando ha bisogno di rendere la nostra pagina web.
Quindi, se stai includendo immagini nella tua pagina web, allora compito imagemin è
qualcosa che dovresti imparare per ridurre le dimensioni dei tuoi file immagine.
Quindi, per farlo, installerò questo modulo del nodo imagemin come modulo globale.
Quindi digito sudo, dal momento che sto usando un Mac,
npm -g install imagemin-cli,
e quindi installo questo modulo nodo.
A volte su un Mac, alcuni dei plugin imagemin non vengono installati correttamente.
Ecco perché sto dando questi flag aggiuntivi al comando,
stanno dicendo —unsafe-perm = true e —allow-root.
Una volta completata l'installazione,
lasciami impostare uno script per fare l'ingrandimento delle mie immagini.
Andando di nuovo a package.json, ho intenzione di impostare il prossimo script qui.
Quindi direi imagemin è il nome dello script che sto per fare,
e direi imagemin.
E poi dal momento che tutte le mie immagini sono nella cartella img, direi img/*,
e poi molti file verranno copiati nell'immagine dist.
Quindi i file immagine originali dalla cartella immagine che ho verranno copiati
nella cartella di distribuzione e nella sottocartella immagine lì.
Quindi questo completa il mio imagemin.
Permettetemi di procedere con il restante set up, e
poi vedremo come faremo uso degli script che abbiamo già impostato lì.
Ora che ho la cartella di test lì, che potrei creare,
non voglio controllare la cartella dist nel mio repository Git.
Ecco perché nel mio file.gitignore, aggiungerò anche nella cartella dist.
Quindi la cartella dist verrà ignorata quando eseguo il mio check-in nel repository Git.
Quindi salviamo le modifiche, tornando a package.json.
Ora, quello che farò dopo è installare tre diversi
moduli nodo, che mi consentono di fare le modifiche
al mio file index.html e ai restanti file HTML lì.
Al prompt dei comandi, digitare npm install —save dev.
Ho intenzione di installare un modulo chiamato come usemin-cli.
Questo usemin-cli è quello che mi permette di fare la trasformazione dal mio
file HTML.
E poi concatenare e combinare tutti i
file CSS in un singolo file CSS, quindi inserirlo nella cartella di distribuzione.
Allo stesso modo, tutti i file JS verranno concatenati e inseriti in una singola cartella.
Quindi questo usemin-cli è utile.
Ma questo usemin-cli prende l'aiuto
di altri tre moduli nodo chiamati cssmin,
quindi uglifyjs e htmlmin.
Quindi ho bisogno di installare questi tre moduli di nodi oltre a usemin-cli.
E ho intenzione di installare questo localmente nel mio progetto,
ecco perché npm install —save-def.
Quindi in questo modo, verranno ricordati nel mio file package.json.
Quindi andiamo avanti e completiamo l'installazione.
Ora che ho installato l'usemin e
i relativi moduli nodo, ho bisogno di fare una certa trasformazione nel
mio file index.html e nei restanti file HTML.
Tale che l'usemin node_module riconosce che questo gruppo è
un gruppo di file CSS che devono essere compressi, calcolati e verificati.
Allo stesso modo, questo è il gruppo di file JavaScript che devono essere uglificati
, combinati e concatenati insieme.
Quindi, per aiutare il pacchetto usemin
a funzionare, ho bisogno di aggiungere un po 'di codice nel mio file index.html.
Quindi, proprio prima del primo link lì,
ho intenzione di aggiungere un segno qui,
che dice! — build:css.
Ora, questo! -, come riconoscerai,
è un commento dal punto di vista html.
Quindi all'interno di quel commento, includerò che questa particolare riga
verrà utilizzata dal menu use per riconoscere il blocco di
codice che specifica tutti i file CSS che devono essere trasferiti.
Quindi dico build.css, e poi specificherò
il nome del file come css/main.css.
Questa è la sintassi per specificare.
Ciò significa che questi blocchi di file CSS saranno tutti combinati insieme,
e quindi concatenati, minificati e quindi inseriti in questo file chiamato main.css.
E poi questo blocco verrà identificato dall'altra parte dicendo,
trattino, ok, scusa.
Ho dimenticato di includere il doppio trattino alla fine.
Questo è il motivo per cui questo non stava girando i colori.
Quindi a volte sei felice che il tuo
editor stia segnalando questi potenziali errori che potresti commettere.
Quindi proprio lì direi endbuild e
poi — parentesi destra lì.
Ora, qualunque cosa sia tra questa build e
endbuild, questo gruppo sarà trattato come un'unità per
essere combinato dal nostro modulo usemin npm lì.
Guarda la sintassi che il modulo usemin usa lì.
Ho bisogno di fare la stessa trasformazione in contactus.html e aboutus.html anche.
Quindi ho intenzione di copiare questo
qui quello pigro che sono.
Semplicemente copierò e
incollerò in contactus.html e
poi anche aboutus.html lì.
Allo stesso modo, tornando a index.html,
copierò questo inbuild e poi lo copierò anche nei
dati contactus.html e aboutus.html.
Ok, salviamo le modifiche a tutti i file.
Quindi, tornando a index.html.
Ripeterò la stessa cosa in fondo per i miei
script JavaScript che ho incluso lì.
Quindi, andando in fondo qui,
quello che devo fare qui,
è specificare <! - costruisci js
e dirò js/main.js.
Doppio trattino, barra.
Quindi questo è l'inizio del blocco e poi il finale è specificato da,
Build, ok?
Quindi con queste modifiche, ora, il mio file index.html è pronto
e devo fare la stessa trasformazione in contactus.html in fondo.
E aboutus.html anche in basso.
Allo stesso modo, questo incorporamento copiato in. In
contactus.html e aboutus.html e quindi salvare tutti i file.
E questo prepara i nostri file HTML per
essere trasformati per preparare la cartella di distribuzione.
Questi file rimarranno come tali, ma i file trasformati verranno inseriti
nella cartella di distribuzione creata da questi file.
Ora, una volta completato, impostiamo alcuni script.
Andando a package.json, imposterò il mio prossimo script chiamato usemin.
E poi questo dice usemin,
contactus.html -d dist, questa è la sintassi per
specificare -d dist che significa che la destinazione per
questa cartella dist distribuzione.
E poi direi htmlmin, questo ridurrà anche al minimo il file HTML.
Quindi rimuoverà tutti gli spazi e i commenti estranei dal file HTML.
Ma lo comprimono in modo
che contenga il numero minimo di caratteri lì.
Vedremo il risultato dopo aver completato e faremo la trasformazione lì.
In modo che e poi, non solo,
e poi htmlmin, e poi dire
-o dist/contactus.html e
&&, questo significa che c'è
altro da venire dopo questo.
Quindi dirò usemin
quindi aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Quindi questo è il secondo per trasformare il file aboutus.html.
E poi &&, questo è uno script lungo,
usemin index.html,
abbiamo bisogno di trasformare tutti i file.
Ecco perché ho bisogno di specificare ognuno esplicitamente lì.
usemin non accetta i caratteri jolly, quindi
questo è il motivo per cui devo specificare la partecipazione come [INUDIBLE].
E così usemin index.html
-d dist —htmlmin
-o dist/index.html.
E poi dopo ho messo una virgola perché ho intenzione di introdurre il prossimo script,
che è, Chiamato build.
Quindi questo script di build creerà la mia cartella di distribuzione.
Quindi, per creare
la mia cartella di distribuzione, la prima cosa che farò è npm run clean.
E poi npm esegue copyfonts.
Hai già visto questi due in azione prima,
quindi dirò npm run imagemin per creare le immagini ridotte a icona,
e poi direi npm run usemin.
E questo particolare script costruirà la mia cartella
di distribuzione, il cui contenuto può quindi essere copiato sul mio server web per risolvere il mio passo.
Salvare le modifiche.
Vediamo ora come costruiamo il sito web.
A questo punto, per costruire il nostro sito web e
il prompt dei comandi è semplicemente digitare npm run build e quindi eseguire.
Quello script, che a sua volta eseguirà un insieme
di entrambi gli script, che a sua volta completerà l'intero set
di attività che devono essere eseguite per preparare la mia cartella di distribuzione.
Quindi, andiamo avanti ed eseguiamo questa cosa e
poi questo verrà eseguito attraverso tutti i diversi script lì. Il
completamento del processo richiede alcuni minuti e, una volta completato,
la cartella di distribuzione sarà ora pronta per la distribuzione sul server Web.
Andando al nostro editor,
ora si vede che la cartella di distribuzione è ora pronta.
All' interno della cartella di distribuzione vedrete i tre file di indice,
e nella cartella CSS, vedrete il singolo file chiamato m ain.css,
che contiene tutti i CSS Bootstraps, il CSS Bootstraps
e il codice CSS che avete creato.
E la cartella JS conterrà il main.js,
che contiene Bootstrap, jQuery e
tutto l'intero gruppo di codice JavaScript combinati insieme in un unico file.
L' immagine conterrà le immagini ottimizzate, e i font, ovviamente,
avete visto in precedenza, contengono i file di font.
Ora, diamo una rapida occhiata a index.html che è stato creato qui.
Quindi, quando guardi il index.html che è stato creato qui,
noterai che il tutto è letteralmente illeggibile,
perché quando hai fatto HTML min ha rimosso tutti i
commenti estranei, ha rimosso tutti gli spazi e
quindi creato questo intero set in esecuzione di caratteri.
Per il computer non fa alcuna differenza perché renderà questa
pagina web altrettanto bene.
Per me e te fa la differenza, perché non possiamo leggerlo facilmente.
Quindi questo è ciò che la minificazione causa al tuo file HTML.
Diamo un'occhiata al main.css.
Quando guardi il main.css vedi che l'intera cosa è scricchiolata
in una singola unità, mentre vai in fondo.
Se siete abbastanza coraggiosi, scendere verso il basso e poi si vedrà il,
Vedrete ore specificamente scritte
classi CSS proprio giù in basso qui.
Proprio lì, si riconosce il pulsante giostra, e altre cose,
nabber-dark, e altre cose lì, quindi è tutto aggraffato dentro.
Quindi questo è ciò che la minificazione, e costa.
Main.js, stessa cosa.
Codice illeggibile lì.
Il loro computer, nessuna differenza.
Quindi, con questo, la nostra cartella di distribuzione è ora completa.
Controlliamo la nostra cartella di distribuzione.
Fortunatamente, abbiamo il nostro server di luce già in esecuzione.
Quindi quello che ho intenzione di fare è andare al browser, e
quindi controllare il file CLM pronto per l'indice in questa cartella di distribuzione per
vedere se viene eseguito il rendering correttamente o meno.
Andando al browser, nella mia barra degli indirizzi digiterò,
dist index.html e
noterò che questo particolare file è il
file di distribuzione che è stato creato, e contiene esattamente la stessa cosa e
rende esattamente allo stesso modo della nostra pagina web originale che abbiamo creato.
A proposito, allo stesso modo, si noti che questo aboutus.html proviene dalla
cartella di distribuzione e questo viene reso esattamente come prima,
e anche il file contactus.html.
Tutto funziona perfettamente.
Quindi ora tutto ciò che ti rimane da fare per distribuire la tua pagina web,
o il tuo sito web, è semplicemente copiare il contenuto dalla cartella dist,
e poi caricarlo sul tuo server web, e
quindi il tuo server web è attivo e funzionante, servendo il tuo sito web.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto come possiamo fare uso di
script NBM al fine di costruire e distribuire il nostro sito web.
Questo potrebbe essere un buon momento per
fare un Get Comment con il messaggio NPM Scripts, parte 2.
[ MUSIC]