1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
Finora, ci siamo concentrati sulla progettazione e

3
00:00:08,968 --> 00:00:14,540
implementazione del nostro sito web, che si tratti di codice HTML, CSS o JavaScript.

4
00:00:16,170 --> 00:00:21,890
Una volta che il sito web è pronto, il passo successivo è quello di essere in grado di costruire il sito web e di

5
00:00:21,890 --> 00:00:26,010
distribuirlo su un server web, in modo che diventi pubblicamente disponibile.

6
00:00:27,300 --> 00:00:30,750
Poi la nostra seconda serie di passaggi che dobbiamo sottoporsi prima che

7
00:00:30,750 --> 00:00:34,580
il tuo sito web sia pronto per la distribuzione su un server web.

8
00:00:34,580 --> 00:00:39,079
Questo è ciò che vedremo in questa e nella prossima lezione.

9
00:00:40,915 --> 00:00:43,479
Come ho accennato, lo sviluppo e

10
00:00:43,479 --> 00:00:47,870
la distribuzione web coinvolgono molte attività ripetitive.

11
00:00:47,870 --> 00:00:54,820
Ovviamente, la scrittura del codice HTML/CSS e JavaScript è una parte di esso.

12
00:00:54,820 --> 00:00:57,600
Ma l'altra parte è il fatto che se scrivi

13
00:00:59,200 --> 00:01:04,170
il codice CSS usando uno dei linguaggi di preelaborazione CSS, come Sass o

14
00:01:04,170 --> 00:01:09,200
Less, devi convertire quel codice nel codice CSS corrispondente.

15
00:01:09,200 --> 00:01:14,614
Successivamente, è necessario eseguire ulteriori elaborazioni sui

16
00:01:14,614 --> 00:01:20,810
file CSS come minificazione, compattazione e concatenazione.

17
00:01:20,810 --> 00:01:24,850
Ne parleremo un po' di più nelle prossime diapositive.

18
00:01:24,850 --> 00:01:30,090
Allo stesso modo, con il tuo codice JavaScript, devi fare

19
00:01:30,090 --> 00:01:34,580
JShinting, controllando potenziali errori.

20
00:01:34,580 --> 00:01:40,590
Quindi concatenazione di vari file di script e

21
00:01:40,590 --> 00:01:45,100
quindi anche uglification e la mangling del codice.

22
00:01:45,100 --> 00:01:49,240
Ne parleremo un po' nelle prossime diapositive.

23
00:01:49,240 --> 00:01:54,889
Tutti questi compiti sono compiti ripetitivi, che vorremmo automatizzare il

24
00:01:54,889 --> 00:02:00,536
più possibile, in modo da poterci concentrare sulla progettazione e la

25
00:02:00,536 --> 00:02:05,730
costruzione reali del nostro sito web, piuttosto che su questi compiti ripetitivi. In

26
00:02:05,730 --> 00:02:09,623
modo che il principio DRY, non ripetersi,

27
00:02:09,623 --> 00:02:11,840
è molto essenziale in questo caso.

28
00:02:11,840 --> 00:02:16,840
Non vogliamo sprecare il nostro tempo in tali attività di combustione ripetitiva,

29
00:02:16,840 --> 00:02:20,140
e invece, cercare di automatizzarle il più possibile in modo

30
00:02:20,140 --> 00:02:23,410
che possano essere eseguite ogni volta che necessario.

31
00:02:23,410 --> 00:02:27,649
Parliamo di alcuni di questi compiti ripetitivi in modo un po 'più dettagliato.

32
00:02:28,950 --> 00:02:33,580
Prendiamo l'esempio di CSS come caso.

33
00:02:33,580 --> 00:02:37,470
Quando scriviamo codice CSS, spesso scriviamo il codice

34
00:02:37,470 --> 00:02:41,440
usando uno dei linguaggi di pre-elaborazione come Less o Sass.

35
00:02:41,440 --> 00:02:46,920
Ora, una volta che il codice è scritto, allora deve essere convertito in CSS utilizzando

36
00:02:46,920 --> 00:02:52,460
uno dei preprocessori come abbiamo visto nella lezione precedente.

37
00:02:54,130 --> 00:02:59,660
Lì, potremmo aver bisogno di fare alcuni prefissi specifici del fornitore per

38
00:02:59,660 --> 00:03:06,300
il nostro codice CSS per risolvere i problemi che potrebbero sorgere con vari browser.

39
00:03:06,300 --> 00:03:12,599
Quindi questo è dove viene utilizzato il compito di fare il prefisso automatico,

40
00:03:12,599 --> 00:03:16,980
per cui questo può essere fatto automaticamente per noi.

41
00:03:16,980 --> 00:03:20,430
Allo stesso modo, una volta che il tuo codice CSS è scritto, ovviamente,

42
00:03:20,430 --> 00:03:26,010
il modo in cui scriviamo codice CSS deve essere umanamente leggibile.

43
00:03:26,010 --> 00:03:30,550
Ma per una macchina, non importa se ci sono abbastanza spazi

44
00:03:30,550 --> 00:03:34,000
tra il codice o se è formattato correttamente o meno.

45
00:03:35,100 --> 00:03:41,274
Quindi, la minificazione è il processo di rimozione di tutti i caratteri non necessari,

46
00:03:41,274 --> 00:03:46,080
lo spazio bianco, le nuove righe, i commenti, dal tuo codice CSS.

47
00:03:46,080 --> 00:03:51,280
In modo che il risultato finale sia un file molto compatto con un numero minimo

48
00:03:51,280 --> 00:03:56,306
di caratteri, in modo che possa essere servito molto, molto rapidamente.

49
00:03:56,306 --> 00:03:57,812
Ma allo stesso tempo,

50
00:03:57,812 --> 00:04:03,099
vuoi preservare la funzionalità che hai progettato nel tuo codice CSS.

51
00:04:04,550 --> 00:04:09,140
Allo stesso modo, potresti distribuire il tuo codice CSS in molti file,

52
00:04:09,140 --> 00:04:12,870
mentre stai progettando e costruendo il tuo sito web.

53
00:04:12,870 --> 00:04:17,620
Si consiglia di concatenarli tutti in un unico file CSS alla fine, in

54
00:04:17,620 --> 00:04:21,430
modo che solo un singolo file CSS debba essere scaricato

55
00:04:21,430 --> 00:04:25,290
dal browser durante il rendering del tuo sito web.

56
00:04:25,290 --> 00:04:27,150
Quindi la concatenazione è

57
00:04:27,150 --> 00:04:32,340
un altro compito che è coinvolto quando stai costruendo il tuo sito web.

58
00:04:33,660 --> 00:04:38,940
Allo stesso modo, quando si scrive codice JavaScript, che si tratti di puro JavaScript

59
00:04:38,940 --> 00:04:44,800
o jQuery o di uno dei framework che useremo

60
00:04:44,800 --> 00:04:50,640
nei corsi futuri di questa specializzazione, si avrebbe bisogno di scrivere codice JavaScript.

61
00:04:50,640 --> 00:04:53,550
Quindi, una volta scritto il codice JavaScript, ti consigliamo di essere in grado di controllare

62
00:04:53,550 --> 00:04:57,510
il codice JavaScript per errori e potenziali problemi.

63
00:04:57,510 --> 00:05:00,576
Cose come punti e virgola mancanti,

64
00:05:02,810 --> 00:05:09,030
uso improprio del linguaggio e così via, quindi ciò che chiamiamo analisi del codice statico.

65
00:05:09,030 --> 00:05:13,490
Quindi, se vuoi essere in grado di eseguire questo, anche prima di distribuire il nostro

66
00:05:14,830 --> 00:05:18,180
sito web sul server web.

67
00:05:18,180 --> 00:05:23,379
Allo stesso modo, potremmo organizzare il nostro codice in più file JavaScript.

68
00:05:23,379 --> 00:05:28,135
Quando effettivamente distribuiamo, potremmo voler concatenare tutti questi file in

69
00:05:28,135 --> 00:05:33,515
un unico file JavaScript e quindi usarlo nelle nostre pagine web.

70
00:05:33,515 --> 00:05:36,775
E questa concatenazione può essere eseguita automaticamente.

71
00:05:36,775 --> 00:05:42,340
Allo stesso modo, l'uglificazione del codice JavaScript, che sta per

72
00:05:42,340 --> 00:05:46,720
minificazione, il che significa rimuovere tutti gli spazi bianchi inutili e

73
00:05:46,720 --> 00:05:48,880
commenti e così via.

74
00:05:48,880 --> 00:05:53,670
E la manipolazione del codice, che significa ridurre i nomi delle

75
00:05:53,670 --> 00:05:58,100
variabili locali a lettere singole laddove possibile.

76
00:05:58,100 --> 00:06:01,562
Ora, dal punto di vista di un computer,

77
00:06:01,562 --> 00:06:06,790
non gli interessa davvero come appare il codice fintanto che funziona correttamente.

78
00:06:06,790 --> 00:06:12,230
Per il formato leggibile dall'uomo, ovviamente scriviamo il codice in

79
00:06:12,230 --> 00:06:17,960
modo molto più elaborato, in modo che sia più facile per noi seguire ciò che il codice sta facendo.

80
00:06:17,960 --> 00:06:19,620
Quindi, quando esegui effettivamente la distribuzione,

81
00:06:19,620 --> 00:06:23,460
potresti voler rimuovere tutte le funzionalità estranee dal tuo codice.

82
00:06:23,460 --> 00:06:29,226
E poi compattalo in modo che venga servita la quantità minima di codice.

83
00:06:29,226 --> 00:06:35,270
Allo stesso tempo, al completamento del

84
00:06:35,270 --> 00:06:37,200
processo di concatenazione e uglificazione JSHint,

85
00:06:37,200 --> 00:06:41,990
potresti comunque voler assicurarti che il tuo codice risultante funzioni correttamente.

86
00:06:41,990 --> 00:06:46,490
Quindi, potresti voler ricontrollare il tuo codice per potenziali errori.

87
00:06:47,550 --> 00:06:52,127
CSS e JavaScript sono due aspetti principali del tuo sviluppo web

88
00:06:52,127 --> 00:06:55,640
a cui devi ovviamente prestare molta attenzione.

89
00:06:55,640 --> 00:06:59,640
Tuttavia, ci sono molte altre attività più piccole che è necessario eseguire

90
00:06:59,640 --> 00:07:02,870
prima che il sito Web sia pronto per la distribuzione.

91
00:07:02,870 --> 00:07:08,601
Potresti includere molte immagini nelle tue pagine web.

92
00:07:08,601 --> 00:07:14,574
Una volta che il sito Web è pronto, è possibile compattare le immagini in

93
00:07:14,574 --> 00:07:17,881
modo da ottimizzare le dimensioni dei file, in modo

94
00:07:17,881 --> 00:07:23,440
che le immagini siano file di dimensioni minime da distribuire.

95
00:07:24,510 --> 00:07:30,310
Allo stesso modo, mentre stai facendo sviluppo, potresti apportare modifiche ai

96
00:07:30,310 --> 00:07:35,580
tuoi file Sass o al tuo codice JavaScript.

97
00:07:35,580 --> 00:07:38,268
Quando tali modifiche sono fatte,

98
00:07:38,268 --> 00:07:42,748
si desidera essere in grado di eseguire automaticamente tali attività,

99
00:07:42,748 --> 00:07:47,990
come concatenazione, minificazione e attività di uglificazione.

100
00:07:47,990 --> 00:07:52,110
Quindi potremmo usare le attività di vigilanza,

101
00:07:52,110 --> 00:07:56,480
il cui compito principale è quello di tenere d'occhio tutti questi file.

102
00:07:56,480 --> 00:07:59,340
E se vengono apportate modifiche a questi file,

103
00:07:59,340 --> 00:08:03,070
le attività verranno eseguite automaticamente.

104
00:08:03,070 --> 00:08:09,260
Ciò libererà molto del nostro tempo dall'eseguire manualmente attività ripetitive.

105
00:08:10,610 --> 00:08:15,320
Vedremo alcuni di questi in modo più dettagliato negli esercizi che seguono.

106
00:08:16,660 --> 00:08:22,060
Un altro aspetto, mentre stai facendo il tuo sviluppo,

107
00:08:22,060 --> 00:08:25,940
è quello di essere in grado di servire il tuo codice e

108
00:08:25,940 --> 00:08:30,570
guardare il codice nel tuo browser.

109
00:08:30,570 --> 00:08:37,960
Così abbiamo visto l'uso del server live nel nostro sviluppo precedente,

110
00:08:37,960 --> 00:08:42,330
dove abbiamo avuto il server attivo e funzionante e servire il codice.

111
00:08:42,330 --> 00:08:46,530
In modo che possiamo vedere le modifiche che facciamo istantaneamente

112
00:08:48,230 --> 00:08:51,020
essere renderizzate nel browser.

113
00:08:51,020 --> 00:08:55,549
Quindi, per questo, abbiamo bisogno di server e livereload meccanismo, e

114
00:08:55,549 --> 00:09:01,340
server live che abbiamo visto in precedenza è uno di questi esempi di come possiamo raggiungere questo obiettivo.

115
00:09:02,740 --> 00:09:07,850
Infine, se stai scrivendo codice, ovviamente devi eseguire test

116
00:09:07,850 --> 00:09:14,210
del tuo codice, che, nel caso di Bootstrap, è molto meno importante.

117
00:09:14,210 --> 00:09:18,930
Ma mentre si continua a utilizzare vari framework JavaScript, il

118
00:09:18,930 --> 00:09:21,915
test diventa un compito altrettanto importante.

119
00:09:23,190 --> 00:09:28,680
Infine, si desidera essere in grado di eseguire tutte queste attività e

120
00:09:28,680 --> 00:09:34,250
quindi creare il codice di distribuzione finale che può quindi essere caricato

121
00:09:34,250 --> 00:09:48,115
sul server Web per rendere il sito Web disponibile per il pubblico in generale.

122
00:09:48,115 --> 00:09:53,950
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.

123
00:09:53,950 --> 00:09:59,754
Vedremo alcuni di questi attraverso esempi nel prossimo esercizio e

124
00:09:59,754 --> 00:10:04,470
anche la prossima lezione in cui vedremo i task runners.

125
00:10:04,470 --> 00:10:10,569
[ MUSIC]