[MUSIC]
Finora, ci siamo concentrati sulla progettazione e
implementazione del nostro sito web, che si tratti di codice HTML, CSS o JavaScript.
Una volta che il sito web è pronto, il passo successivo è quello di essere in grado di costruire il sito web e di
distribuirlo su un server web, in modo che diventi pubblicamente disponibile.
Poi la nostra seconda serie di passaggi che dobbiamo sottoporsi prima che
il tuo sito web sia pronto per la distribuzione su un server web.
Questo è ciò che vedremo in questa e nella prossima lezione.
Come ho accennato, lo sviluppo e
la distribuzione web coinvolgono molte attività ripetitive.
Ovviamente, la scrittura del codice HTML/CSS e JavaScript è una parte di esso.
Ma l'altra parte è il fatto che se scrivi
il codice CSS usando uno dei linguaggi di preelaborazione CSS, come Sass o
Less, devi convertire quel codice nel codice CSS corrispondente.
Successivamente, è necessario eseguire ulteriori elaborazioni sui
file CSS come minificazione, compattazione e concatenazione.
Ne parleremo un po' di più nelle prossime diapositive.
Allo stesso modo, con il tuo codice JavaScript, devi fare
JShinting, controllando potenziali errori.
Quindi concatenazione di vari file di script e
quindi anche uglification e la mangling del codice.
Ne parleremo un po' nelle prossime diapositive.
Tutti questi compiti sono compiti ripetitivi, che vorremmo automatizzare il
più possibile, in modo da poterci concentrare sulla progettazione e la
costruzione reali del nostro sito web, piuttosto che su questi compiti ripetitivi. In
modo che il principio DRY, non ripetersi,
è molto essenziale in questo caso.
Non vogliamo sprecare il nostro tempo in tali attività di combustione ripetitiva,
e invece, cercare di automatizzarle il più possibile in modo
che possano essere eseguite ogni volta che necessario.
Parliamo di alcuni di questi compiti ripetitivi in modo un po 'più dettagliato.
Prendiamo l'esempio di CSS come caso.
Quando scriviamo codice CSS, spesso scriviamo il codice
usando uno dei linguaggi di pre-elaborazione come Less o Sass.
Ora, una volta che il codice è scritto, allora deve essere convertito in CSS utilizzando
uno dei preprocessori come abbiamo visto nella lezione precedente.
Lì, potremmo aver bisogno di fare alcuni prefissi specifici del fornitore per
il nostro codice CSS per risolvere i problemi che potrebbero sorgere con vari browser.
Quindi questo è dove viene utilizzato il compito di fare il prefisso automatico,
per cui questo può essere fatto automaticamente per noi.
Allo stesso modo, una volta che il tuo codice CSS è scritto, ovviamente,
il modo in cui scriviamo codice CSS deve essere umanamente leggibile.
Ma per una macchina, non importa se ci sono abbastanza spazi
tra il codice o se è formattato correttamente o meno.
Quindi, la minificazione è il processo di rimozione di tutti i caratteri non necessari,
lo spazio bianco, le nuove righe, i commenti, dal tuo codice CSS.
In modo che il risultato finale sia un file molto compatto con un numero minimo
di caratteri, in modo che possa essere servito molto, molto rapidamente.
Ma allo stesso tempo,
vuoi preservare la funzionalità che hai progettato nel tuo codice CSS.
Allo stesso modo, potresti distribuire il tuo codice CSS in molti file,
mentre stai progettando e costruendo il tuo sito web.
Si consiglia di concatenarli tutti in un unico file CSS alla fine, in
modo che solo un singolo file CSS debba essere scaricato
dal browser durante il rendering del tuo sito web.
Quindi la concatenazione è
un altro compito che è coinvolto quando stai costruendo il tuo sito web.
Allo stesso modo, quando si scrive codice JavaScript, che si tratti di puro JavaScript
o jQuery o di uno dei framework che useremo
nei corsi futuri di questa specializzazione, si avrebbe bisogno di scrivere codice JavaScript.
Quindi, una volta scritto il codice JavaScript, ti consigliamo di essere in grado di controllare
il codice JavaScript per errori e potenziali problemi.
Cose come punti e virgola mancanti,
uso improprio del linguaggio e così via, quindi ciò che chiamiamo analisi del codice statico.
Quindi, se vuoi essere in grado di eseguire questo, anche prima di distribuire il nostro
sito web sul server web.
Allo stesso modo, potremmo organizzare il nostro codice in più file JavaScript.
Quando effettivamente distribuiamo, potremmo voler concatenare tutti questi file in
un unico file JavaScript e quindi usarlo nelle nostre pagine web.
E questa concatenazione può essere eseguita automaticamente.
Allo stesso modo, l'uglificazione del codice JavaScript, che sta per
minificazione, il che significa rimuovere tutti gli spazi bianchi inutili e
commenti e così via.
E la manipolazione del codice, che significa ridurre i nomi delle
variabili locali a lettere singole laddove possibile.
Ora, dal punto di vista di un computer,
non gli interessa davvero come appare il codice fintanto che funziona correttamente.
Per il formato leggibile dall'uomo, ovviamente scriviamo il codice in
modo molto più elaborato, in modo che sia più facile per noi seguire ciò che il codice sta facendo.
Quindi, quando esegui effettivamente la distribuzione,
potresti voler rimuovere tutte le funzionalità estranee dal tuo codice.
E poi compattalo in modo che venga servita la quantità minima di codice.
Allo stesso tempo, al completamento del
processo di concatenazione e uglificazione JSHint,
potresti comunque voler assicurarti che il tuo codice risultante funzioni correttamente.
Quindi, potresti voler ricontrollare il tuo codice per potenziali errori.
CSS e JavaScript sono due aspetti principali del tuo sviluppo web
a cui devi ovviamente prestare molta attenzione.
Tuttavia, ci sono molte altre attività più piccole che è necessario eseguire
prima che il sito Web sia pronto per la distribuzione.
Potresti includere molte immagini nelle tue pagine web.
Una volta che il sito Web è pronto, è possibile compattare le immagini in
modo da ottimizzare le dimensioni dei file, in modo
che le immagini siano file di dimensioni minime da distribuire.
Allo stesso modo, mentre stai facendo sviluppo, potresti apportare modifiche ai
tuoi file Sass o al tuo codice JavaScript.
Quando tali modifiche sono fatte,
si desidera essere in grado di eseguire automaticamente tali attività,
come concatenazione, minificazione e attività di uglificazione.
Quindi potremmo usare le attività di vigilanza,
il cui compito principale è quello di tenere d'occhio tutti questi file.
E se vengono apportate modifiche a questi file,
le attività verranno eseguite automaticamente.
Ciò libererà molto del nostro tempo dall'eseguire manualmente attività ripetitive.
Vedremo alcuni di questi in modo più dettagliato negli esercizi che seguono.
Un altro aspetto, mentre stai facendo il tuo sviluppo,
è quello di essere in grado di servire il tuo codice e
guardare il codice nel tuo browser.
Così abbiamo visto l'uso del server live nel nostro sviluppo precedente,
dove abbiamo avuto il server attivo e funzionante e servire il codice.
In modo che possiamo vedere le modifiche che facciamo istantaneamente
essere renderizzate nel browser.
Quindi, per questo, abbiamo bisogno di server e livereload meccanismo, e
server live che abbiamo visto in precedenza è uno di questi esempi di come possiamo raggiungere questo obiettivo.
Infine, se stai scrivendo codice, ovviamente devi eseguire test
del tuo codice, che, nel caso di Bootstrap, è molto meno importante.
Ma mentre si continua a utilizzare vari framework JavaScript, il
test diventa un compito altrettanto importante.
Infine, si desidera essere in grado di eseguire tutte queste attività e
quindi creare il codice di distribuzione finale che può quindi essere caricato
sul server Web per rendere il sito Web disponibile per il pubblico in generale.
Anche i passaggi necessari per la creazione del tuo sito per la distribuzione, ciò che chiamiamo come creazione dei file di distribuzione, sono un compito altrettanto importante.
Vedremo alcuni di questi attraverso esempi nel prossimo esercizio e
anche la prossima lezione in cui vedremo i task runners.
[ MUSIC]