1
00:00:00,000 --> 00:00:04,535
[MÚSICA]

2
00:00:04,535 --> 00:00:10,479
Ahora continuaremos nuestro viaje con scripts de NPM en este próximo ejercicio.

3
00:00:10,479 --> 00:00:15,182
Aquí vamos a aprender cómo construir

4
00:00:15,182 --> 00:00:20,335
una carpeta de distribución que contiene todos los archivos de

5
00:00:20,335 --> 00:00:27,970
nuestro proyecto que simplemente podemos implementar en un servidor web que aloja nuestro sitio web.

6
00:00:27,970 --> 00:00:33,050
Así que dados los archivos HTML, CSS y JavaScript que

7
00:00:33,050 --> 00:00:39,010
ya hemos preparado en nuestra carpeta de proyectos, vamos a, a partir de ellos,

8
00:00:39,010 --> 00:00:44,895
procesarlos utilizando las diversas tareas de las que hablamos.

9
00:00:44,895 --> 00:00:49,246
Eso es hacer una modificación CSS,

10
00:00:49,246 --> 00:00:54,740
concatenación y uglification, minificación

11
00:00:54,740 --> 00:00:59,230
y minificación HTML de JavaScript y

12
00:00:59,230 --> 00:01:04,895
luego generar una carpeta de distribución con todos los archivos.

13
00:01:04,895 --> 00:01:09,520
Pero esencialmente forma el conjunto de archivos que se pueden

14
00:01:09,520 --> 00:01:13,200
implementar en nuestro servidor web que aloja nuestro sitio web.

15
00:01:15,165 --> 00:01:21,005
Para ayudarle a entender lo que vamos a hacer en este ejercicio en particular,

16
00:01:22,085 --> 00:01:29,102
como observamos en nuestra página index.html, tenemos un conjunto de

17
00:01:29,102 --> 00:01:34,352
archivos CSS que usted incluyó aquí usando esta etiqueta de enlace aquí.

18
00:01:34,352 --> 00:01:38,742
Del mismo modo, tiene un conjunto de secuencias de comandos que ha incluido

19
00:01:38,742 --> 00:01:42,847
en la parte inferior de esta página utilizando la etiqueta de script.

20
00:01:42,847 --> 00:01:46,152
Hemos incluido un conjunto de código JavaScript.

21
00:01:46,152 --> 00:01:51,150
Ahora, lo que vamos a hacer en este ejercicio es combinar todos estos

22
00:01:51,150 --> 00:01:56,760
archivos en un único archivo JavaScript que será entregado

23
00:01:56,760 --> 00:02:03,710
desde nuestro servidor web a un navegador que está tratando de ver nuestro sitio web.

24
00:02:03,710 --> 00:02:08,480
De esta forma, minimizamos el número de descargas que el navegador necesita hacer para

25
00:02:08,480 --> 00:02:10,930
renderizar nuestro sitio web.

26
00:02:10,930 --> 00:02:16,960
Del mismo modo, vamos a combinar todo el código CSS en un solo archivo CSS,

27
00:02:16,960 --> 00:02:18,325
para que pueda ser entregado.

28
00:02:18,325 --> 00:02:24,353
Entonces, el archivo CSS combinado contendrá todo el código para

29
00:02:24,353 --> 00:02:31,751
Bootstrap más Bootstrap social, y también el Font Awesome y

30
00:02:31,751 --> 00:02:36,697
también el código CSS que nosotros mismos escribimos.

31
00:02:36,697 --> 00:02:40,351
Del mismo modo, habrá un único archivo JavaScript que

32
00:02:40,351 --> 00:02:45,297
contendrá el jQuery tether, Bootstrap y el código JavaScript que

33
00:02:45,297 --> 00:02:49,790
nosotros mismos escribimos, todos juntos en un solo archivo.

34
00:02:49,790 --> 00:02:53,610
Ahora, así es como puede hacer la implementación de sus páginas web.

35
00:02:53,610 --> 00:02:58,190
Y en lugar de tener múltiples archivos de este tipo allí, una forma en que

36
00:02:59,560 --> 00:03:03,750
se realiza la implementación es combinarlos en un solo archivo para que una sola descarga

37
00:03:03,750 --> 00:03:08,840
obtenga todo el código JavaScript necesario para renderizar su página web.

38
00:03:08,840 --> 00:03:11,810
Una sola descarga obtienes todo el código CSS necesario para

39
00:03:11,810 --> 00:03:13,200
renderizar tu página web.

40
00:03:13,200 --> 00:03:16,590
Y luego, por supuesto, el archivo HTML en sí se va a descargar.

41
00:03:18,530 --> 00:03:23,390
Para completar estas tareas, necesitamos usar

42
00:03:23,390 --> 00:03:29,070
un cierto conjunto de módulos NPM para lograr esto.

43
00:03:29,070 --> 00:03:33,810
Ahora, lo que terminaremos haciendo es construir una carpeta

44
00:03:33,810 --> 00:03:38,760
en nuestro archivo de proyectos, y luego llamamos a esa carpeta como dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Solo lo estoy nombrando aleatoriamente como una carpeta dist.

46
00:03:42,580 --> 00:03:47,100
En mi caso, lo que quiero decir con la carpeta dist es una carpeta de distribución.

47
00:03:47,100 --> 00:03:51,270
Al final del conjunto de pasos que vamos a hacer, esta carpeta contendrá todos

48
00:03:51,270 --> 00:03:59,510
los archivos que se pueden copiar simplemente en el servidor web que aloja nuestro sitio web.

49
00:03:59,510 --> 00:04:03,930
Para empezar, lo que vamos a hacer es configurar

50
00:04:05,140 --> 00:04:10,960
aquí un conjunto de scripts que nos ayuden a automatizar este proceso.

51
00:04:10,960 --> 00:04:13,930
Así que primero, podríamos

52
00:04:13,930 --> 00:04:18,850
preparar la carpeta de distribución una vez, entonces tal vez podamos hacer algunas ediciones

53
00:04:18,850 --> 00:04:23,310
a nuestros archivos fuente, entonces es posible que tengamos que volver a compilar nuestra carpeta de distribución.

54
00:04:24,420 --> 00:04:29,370
Primer paso, estableceríamos el script para limpiar esa carpeta de distribución que

55
00:04:29,370 --> 00:04:33,050
significa esencialmente, eliminar la carpeta de distribución.

56
00:04:33,050 --> 00:04:37,950
Así que para hacer eso, voy a tomar la ayuda de un módulo NPM llamado como rimfraf.

57
00:04:37,950 --> 00:04:47,760
Así que instalaré npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Este módulo nos ayuda a limpiar completamente una carpeta.

59
00:04:51,920 --> 00:04:56,370
Entonces, una vez que haya instalado esto, configuraré un script

60
00:04:56,370 --> 00:05:01,550
en mi archivo package.json para limpiar todos los archivos.

61
00:05:01,550 --> 00:05:05,360
Al ir al archivo package.json, voy a agregar, así que

62
00:05:05,360 --> 00:05:11,380
recuerde siempre que el coma es muy, muy importante en esos scripts.

63
00:05:11,380 --> 00:05:15,200
A veces te toparás con problemas sólo porque olvidaste la coma.

64
00:05:15,200 --> 00:05:18,230
Así que asegúrate de poner esas comas cuando sea necesario.

65
00:05:18,230 --> 00:05:21,800
La siguiente descripción que voy a agregar es, limpia,

66
00:05:23,410 --> 00:05:29,000
obviamente como su nombre lo indica, esto va a limpiar mi carpeta.

67
00:05:29,000 --> 00:05:32,510
Así que voy a decir rimraf dist.

68
00:05:32,510 --> 00:05:35,610
Lo que esto significa es que esto, cuando se ejecuta,

69
00:05:35,610 --> 00:05:39,860
limpiará la carpeta de distribución.

70
00:05:39,860 --> 00:05:42,215
Así que agregaré eso, y

71
00:05:42,215 --> 00:05:46,780
luego pondré esa coma allí porque voy a agregar más scripts debajo de esto.

72
00:05:46,780 --> 00:05:51,814
Así que déjame guardar los cambios, el siguiente paso que voy a hacer es

73
00:05:51,814 --> 00:05:57,048
instalar un módulo npm llamado copy files que se usan para copiar

74
00:05:57,048 --> 00:06:03,206
algunos archivos de fuente de mi carpeta de módulos de nodo en mi carpeta de distribución.

75
00:06:03,206 --> 00:06:07,430
De modo que cuando se implementa, los archivos de fuentes también se implementan. Al

76
00:06:07,430 --> 00:06:12,840
ir al terminal, el próximo paquete que voy a instalar es

77
00:06:12,840 --> 00:06:19,860
npm -g, recuerde que esto significa que debe instalarse globalmente.

78
00:06:19,860 --> 00:06:23,900
Como estoy haciendo esto en una Mac,

79
00:06:23,900 --> 00:06:30,670
debería decir sudo npm -g, si lo estás haciendo en Windows, no necesitas el sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g instalar archivos de copia.

81
00:06:42,837 --> 00:06:47,493
Y luego, una vez instalado, este módulo NPM me ayudará a copiar

82
00:06:47,493 --> 00:06:50,360
archivos de una carpeta a otra carpeta.

83
00:06:51,390 --> 00:06:54,650
Ahora, permítanme presentar otro script NPM aquí.

84
00:06:56,110 --> 00:06:59,534
Ir a mi archivo package.json,

85
00:06:59,534 --> 00:07:05,046
voy a crear un nuevo scrip aquí copyfonts nombre.

86
00:07:05,046 --> 00:07:09,666
Este script me permitirá copiar todos los archivos de fuentes de mi carpeta

87
00:07:09,666 --> 00:07:13,650
Font Awesome en mi carpeta de distribución.

88
00:07:13,650 --> 00:07:17,510
Para que cuando mi sitio web se renderiza,

89
00:07:17,510 --> 00:07:21,500
todos estos archivos de fuentes también se pueden enviar, de modo que

90
00:07:21,500 --> 00:07:26,110
mis páginas web se procesen correctamente con las fuentes Font Awesome en su lugar.

91
00:07:26,110 --> 00:07:30,949
Entonces, para hacer eso, diré, copiar archivos -f,

92
00:07:30,949 --> 00:07:36,530
-f significa que simplemente copia los archivos sin la jerarquía llena y

93
00:07:36,530 --> 00:07:40,550
simplemente copia los archivos de una ubicación a otra ubicación.

94
00:07:40,550 --> 00:07:43,594
Así que diré copiar archivos -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/fonts/star

96
00:08:03,367 --> 00:08:09,416
Y dist/fonts,

97
00:08:12,386 --> 00:08:14,970
Y luego guardar los cambios.

98
00:08:14,970 --> 00:08:20,620
Permítanme ahora ilustrar cómo estos dos scripts npm funcionan juntos.

99
00:08:20,620 --> 00:08:25,605
Al ir a mi ventana de comando, escribiré

100
00:08:25,605 --> 00:08:30,300
npm run copyfonts.

101
00:08:30,300 --> 00:08:34,650
Cuando esto se ejecuta, creará una carpeta

102
00:08:34,650 --> 00:08:38,640
llamada dist en mi jerarquía de carpetas de proyecto.

103
00:08:38,640 --> 00:08:39,880
Y luego dentro del dist,

104
00:08:39,880 --> 00:08:44,730
habrá una subcarpeta llamada fuentes, que contendrá los archivos de fuentes.

105
00:08:44,730 --> 00:08:46,310
Entonces, al ejecutar esto,

106
00:08:46,310 --> 00:08:50,480
notará inmediatamente que la carpeta de distribución se crea aquí.

107
00:08:50,480 --> 00:08:52,190
Y dentro de la carpeta de distribución,

108
00:08:52,190 --> 00:08:55,000
puede ver que hay una subcarpeta llamada fuentes.

109
00:08:55,000 --> 00:08:58,760
Y ahí dentro, todos los archivos fontawesome han sido copiados.

110
00:09:00,070 --> 00:09:03,700
Así es como funciona el script copyfonts.

111
00:09:04,790 --> 00:09:08,720
Ahora, voy a mostrarte cómo funciona el script limpio.

112
00:09:08,720 --> 00:09:15,275
Entonces, si escribo npm run clean, esto eliminará esa carpeta de distribución.

113
00:09:15,275 --> 00:09:17,805
Entonces, cuando ejecuto eso, notarías que

114
00:09:17,805 --> 00:09:22,435
la carpeta de distribución se elimina de la jerarquía de mi carpeta de proyectos.

115
00:09:22,435 --> 00:09:25,055
Así es como funciona la limpieza.

116
00:09:25,055 --> 00:09:28,075
Ahora que tenemos estos dos scripts configurados,

117
00:09:28,075 --> 00:09:32,735
ahora tenemos que ser capaces de construir los archivos de distribución restantes.

118
00:09:33,745 --> 00:09:39,034
En el siguiente paso, vamos a instalar un módulo de nodo llamado imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
que es la interfaz de línea de comandos para el módulo imagemin.

120
00:09:43,182 --> 00:09:51,032
El módulo imaginemin tomará una secta de archivos de imagen y luego los comprimirá.

121
00:09:51,032 --> 00:09:57,550
Así que apiló el tamaño de esos archivos se minimizan en la medida de lo posible,

122
00:09:57,550 --> 00:10:01,650
pero aún así se renderiza correctamente cuando se renderiza nuestro sitio web.

123
00:10:01,650 --> 00:10:05,060
De esta manera, reduciremos la cantidad de datos que

124
00:10:05,060 --> 00:10:09,870
necesita ser descargados por el navegador cuando necesite renderizar nuestra página web.

125
00:10:09,870 --> 00:10:16,250
Por lo tanto, si está incluyendo imágenes en su página web, entonces la tarea imagemin es

126
00:10:16,250 --> 00:10:21,950
algo que debe aprender para reducir el tamaño de sus archivos de imagen.

127
00:10:21,950 --> 00:10:29,740
Entonces, para hacer eso, voy a instalar este módulo de nodo imagemin como un módulo global.

128
00:10:29,740 --> 00:10:36,145
Así que escribo sudo, ya que estoy usando un Mac,

129
00:10:36,145 --> 00:10:41,270
npm -g instalo imagemin-cli

130
00:10:41,270 --> 00:10:46,770
y luego instalo este módulo de nodo.

131
00:10:50,730 --> 00:10:56,670
A veces, en un Mac, algunos de los plugins de imagemin no se instalan correctamente.

132
00:10:56,670 --> 00:11:02,979
Entonces, es por eso que estoy dando estas banderas adicionales al comando,

133
00:11:02,979 --> 00:11:09,310
están diciendo —unsafe-perm=true y —allow-root.

134
00:11:09,310 --> 00:11:12,497
Una vez completada la instalación,

135
00:11:12,497 --> 00:11:18,183
permítanme configurar un script para hacer esa ampliación de mis imágenes.

136
00:11:18,183 --> 00:11:23,650
Voy a package.json de nuevo, voy a configurar el siguiente script aquí.

137
00:11:23,650 --> 00:11:32,350
Así que yo diría que imagemin es el nombre del guión que voy a hacer,

138
00:11:32,350 --> 00:11:36,610
y yo diría imagemin.

139
00:11:36,610 --> 00:11:43,930
Y luego, dado que todas mis imágenes están en la carpeta img, diría img/*,

140
00:11:43,930 --> 00:11:49,913
y luego muchos archivos se copiarán a dist image.

141
00:11:49,913 --> 00:11:54,997
Entonces, los archivos de imagen originales de la carpeta de imágenes que tengo se copiarán

142
00:11:54,997 --> 00:12:00,300
en la carpeta de distribución y en la subcarpeta de imágenes allí.

143
00:12:00,300 --> 00:12:03,616
Así que esto completa mi imagen.

144
00:12:03,616 --> 00:12:07,460
Permítanme continuar con la configuración restante, y

145
00:12:07,460 --> 00:12:13,070
luego veremos cómo vamos a hacer uso de los scripts que ya hemos configurado allí.

146
00:12:14,260 --> 00:12:19,270
Ahora que tengo la carpeta de prueba allí, que podría crear,

147
00:12:19,270 --> 00:12:26,450
no quiero registrar la carpeta dist en mi repositorio de Git.

148
00:12:26,450 --> 00:12:31,640
Entonces, es por eso que en mi archivo.gitignore, también voy a agregar en la carpeta dist.

149
00:12:31,640 --> 00:12:37,060
Entonces, la carpeta dist se ignorará cuando haga mi registro en el repositorio de Git.

150
00:12:37,060 --> 00:12:43,342
Así que vamos a guardar los cambios, volviendo a package.json.

151
00:12:43,342 --> 00:12:49,710
Ahora, lo que voy a hacer a continuación es instalar tres

152
00:12:50,870 --> 00:12:56,080
módulos de nodo diferentes, que me permiten hacer las modificaciones

153
00:12:56,080 --> 00:13:02,550
a mi archivo index.html y los archivos HTML restantes allí.

154
00:13:02,550 --> 00:13:09,280
En el símbolo del sistema, escriba npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Voy a instalar un módulo llamado usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Este usemin-cli es el que me permite hacer la transformación desde mi

157
00:13:21,166 --> 00:13:22,230
archivo HTML.

158
00:13:22,230 --> 00:13:26,870
Y luego concatenar y combinar todos los

159
00:13:26,870 --> 00:13:30,650
archivos CSS en un solo archivo CSS, y luego ponerlo en la carpeta de distribución.

160
00:13:30,650 --> 00:13:36,700
Del mismo modo, todos los archivos JS se concatenarán y se colocarán en una sola carpeta.

161
00:13:36,700 --> 00:13:38,720
Entonces este usemin-cli es útil.

162
00:13:38,720 --> 00:13:44,005
Pero este usemin-cli toma la ayuda

163
00:13:44,005 --> 00:13:51,051
de otros tres módulos de nodo llamados cssmin,

164
00:13:51,051 --> 00:13:56,350
luego uglifyjs y htmlmin.

165
00:13:56,350 --> 00:14:01,600
Así que necesito instalar estos tres módulos de nodo además de usemin-cli.

166
00:14:01,600 --> 00:14:04,610
Y voy a instalar esto localmente en mi proyecto, así

167
00:14:04,610 --> 00:14:08,330
que es por eso que npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Así que de esta manera, serán recordados en mi archivo package.json.

169
00:14:13,910 --> 00:14:15,890
Así que sigamos adelante y completemos la instalación.

170
00:14:17,230 --> 00:14:21,270
Ahora que he instalado el usemin y

171
00:14:21,270 --> 00:14:26,440
los módulos de nodo relacionados, necesito hacer alguna transformación en

172
00:14:26,440 --> 00:14:30,695
mi archivo index.html y los archivos HTML restantes. De

173
00:14:30,695 --> 00:14:35,750
tal manera que usemin node_module reconoce que este grupo es

174
00:14:35,750 --> 00:14:42,330
un montón de archivos CSS que necesitan ser comprimidos, calculados y verificados.

175
00:14:42,330 --> 00:14:47,730
Del mismo modo, este es el grupo de archivos JavaScript que deben ser uglyfied

176
00:14:47,730 --> 00:14:51,130
, combinados y concatenados juntos.

177
00:14:51,130 --> 00:14:54,480
Entonces, para ayudar al paquete usemin

178
00:14:54,480 --> 00:15:00,430
a funcionar, necesito agregar un poco de código en mi archivo index.html.

179
00:15:00,430 --> 00:15:07,942
Así que justo antes del primer enlace allí,

180
00:15:07,942 --> 00:15:14,747
voy a añadir una marca aquí arriba,

181
00:15:14,747 --> 00:15:21,100
que dice! — compilar:css.

182
00:15:21,100 --> 00:15:25,621
¡ Ahora, esto! —, como reconocerás,

183
00:15:25,621 --> 00:15:29,640
es un comentario desde la perspectiva html.

184
00:15:29,640 --> 00:15:33,405
Así que dentro de ese comentario, voy a incluir que esta línea

185
00:15:33,405 --> 00:15:38,480
en particular va a ser utilizada por el menú de uso para reconocer el bloque de

186
00:15:38,480 --> 00:15:43,370
código que especifica todos los archivos CSS que necesitan ser transferidos.

187
00:15:43,370 --> 00:15:49,743
Así que digo build.css, y luego especificaré

188
00:15:49,743 --> 00:15:54,770
el nombre de archivo como css/main.css.

189
00:15:54,770 --> 00:15:57,160
Esta es la sintaxis para especificar.

190
00:15:57,160 --> 00:16:04,080
Lo que esto significa es que estos bloques de archivos CSS se combinarán juntos,

191
00:16:04,080 --> 00:16:10,510
y luego se concatenarán, minificarán y luego se colocarán en este archivo llamado main.css.

192
00:16:10,510 --> 00:16:15,723
Y entonces este bloque se identificará en el otro lado diciendo: «

193
00:16:21,873 --> 00:16:27,090
Guión...»

194
00:16:27,090 --> 00:16:34,210
Olvidé incluir el doble guión al final.

195
00:16:34,210 --> 00:16:37,050
Esa es la razón por la que esto no estaba cambiando colores.

196
00:16:37,050 --> 00:16:41,780
Así que a veces te alegra que tu

197
00:16:41,780 --> 00:16:46,540
editor esté señalando estos errores potenciales que podrías estar cometiendo.

198
00:16:46,540 --> 00:16:51,779
Así que ahí mismo diría endbuild y

199
00:16:51,779 --> 00:16:56,206
luego — corchete derecho allí.

200
00:16:56,206 --> 00:17:00,904
Ahora, lo que sea que esté entre esta compilación y

201
00:17:00,904 --> 00:17:06,708
endbuild, este grupo será tratado como una unidad para

202
00:17:06,708 --> 00:17:12,252
ser combinado por nuestro módulo usemin npm allí.

203
00:17:12,252 --> 00:17:14,890
Vea la sintaxis que el módulo usemin utiliza allí.

204
00:17:16,230 --> 00:17:22,020
Necesito hacer la misma transformación a contactus.html y aboutus.html también.

205
00:17:22,020 --> 00:17:26,759
Así que voy a copiar este de

206
00:17:26,759 --> 00:17:31,306
aquí el perezoso que soy.

207
00:17:31,306 --> 00:17:35,149
Simplemente copiaré y

208
00:17:35,149 --> 00:17:39,866
pegaré en contactus.html y

209
00:17:39,866 --> 00:17:44,770
luego también aboutus.html allí.

210
00:17:44,770 --> 00:17:50,263
Del mismo modo, volviendo a index.html,

211
00:17:50,263 --> 00:17:56,477
copiaré esta incompilación y luego también copiaré eso en

212
00:17:56,477 --> 00:18:01,840
los datos contactus.html y aboutus.html.

213
00:18:03,530 --> 00:18:08,990
Vale, guardemos los cambios en todos los archivos.

214
00:18:08,990 --> 00:18:12,190
Luego, volviendo a index.html.

215
00:18:12,190 --> 00:18:16,670
Voy a repetir lo mismo en la parte inferior para mis

216
00:18:16,670 --> 00:18:22,220
scripts de JavaScript que he incluido allí.

217
00:18:22,220 --> 00:18:26,730
Así que, yendo al fondo aquí,

218
00:18:26,730 --> 00:18:30,026
lo que tengo que hacer aquí,

219
00:18:30,026 --> 00:18:34,883
es especificar <! — compilar js,

220
00:18:34,883 --> 00:18:39,225
y voy a decir js/main.js.

221
00:18:41,216 --> 00:18:43,130
Doble guión, barra diagonal.

222
00:18:43,130 --> 00:18:47,781
Así que ese es el comienzo del bloque y luego el final se especifica por,

223
00:18:51,540 --> 00:18:55,034
Build, ¿vale?

224
00:18:55,034 --> 00:19:00,782
Entonces, con estos cambios, ahora, mi archivo index.html está listo,

225
00:19:00,782 --> 00:19:07,899
y tengo que hacer la misma transformación a contactus.html en la parte inferior.

226
00:19:14,090 --> 00:19:18,715
Y aboutus.html también en la parte inferior.

227
00:19:25,340 --> 00:19:29,505
Del mismo modo, esta compilación copiada en. En

228
00:19:32,892 --> 00:19:38,649
contactus.html y aboutus.html y luego guarde todos los archivos.

229
00:19:40,130 --> 00:19:44,550
Y eso prepara nuestros archivos HTML para

230
00:19:44,550 --> 00:19:48,940
ser transformados para preparar la carpeta de distribución.

231
00:19:48,940 --> 00:19:53,540
Estos archivos permanecerán como tales, pero luego los archivos transformados se colocarán en

232
00:19:53,540 --> 00:19:58,380
la carpeta de distribución creada a partir de estos archivos.

233
00:19:58,380 --> 00:20:02,948
Ahora, una vez que completemos eso, vamos a configurar algunos guiones.

234
00:20:02,948 --> 00:20:07,875
Ir a package.json, configuraré mi siguiente script llamado usemin.

235
00:20:11,930 --> 00:20:15,890
Y luego esto dice usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, esta es la sintaxis para

237
00:20:24,671 --> 00:20:29,366
especificar -d dist, lo que significa que el destino de

238
00:20:29,366 --> 00:20:32,507
esta carpeta dist de distribución.

239
00:20:32,507 --> 00:20:39,110
Y luego diría htmlmin, esto también va a minimizar el archivo HTML.

240
00:20:39,110 --> 00:20:43,300
Por lo tanto, eliminará todos los espacios y comentarios extraños del archivo HTML.

241
00:20:43,300 --> 00:20:45,110
Pero lo comprimen para

242
00:20:45,110 --> 00:20:48,350
que contenga el número mínimo de caracteres allí.

243
00:20:48,350 --> 00:20:55,165
Vamos a ver el resultado después de completar y hacer la transformación allí.

244
00:20:55,165 --> 00:21:00,528
Entonces eso y luego, no solo eso,

245
00:21:00,528 --> 00:21:05,509
y luego htmlmin, y luego decir

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html y

247
00:21:10,684 --> 00:21:15,664
&&, esto significa que hay

248
00:21:15,664 --> 00:21:19,970
más por venir después de esto.

249
00:21:19,970 --> 00:21:25,730
Luego diré usemin

250
00:21:25,730 --> 00:21:31,171
luego aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d dist —htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
Entonces ese es el segundo para transformar el archivo aboutus.html.

254
00:21:50,078 --> 00:21:55,135
Y luego &&, este es un script largo,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
tenemos que transformar todos los archivos.

257
00:22:02,890 --> 00:22:08,150
Entonces, es por eso que necesito especificar cada uno explícitamente allí.

258
00:22:08,150 --> 00:22:11,910
usemin no toma comodines, por lo

259
00:22:11,910 --> 00:22:16,080
que esa es la razón por la que tengo que especificar la retención como [INAUDIBLE].

260
00:22:16,080 --> 00:22:21,365
Y así usemin index.html

261
00:22:21,365 --> 00:22:27,426
-d dist —htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
Y luego, después de eso, puse una coma porque voy a introducir el siguiente script,

264
00:22:40,656 --> 00:22:45,940
que es, llamada compilación.

265
00:22:45,940 --> 00:22:50,490
Entonces, este script de compilación creará mi carpeta de distribución.

266
00:22:50,490 --> 00:22:54,159
Entonces, para crear mi carpeta

267
00:22:54,159 --> 00:22:59,328
de distribución, lo primero que voy a hacer es npm ejecutar limpio.

268
00:22:59,328 --> 00:23:07,090
Y luego npm ejecuta copyfonts.

269
00:23:07,090 --> 00:23:12,347
Ya ha visto estos dos en acción anteriormente,

270
00:23:12,347 --> 00:23:18,950
entonces diré que npm ejecuta imagemin para crear las imágenes minimizadas,

271
00:23:18,950 --> 00:23:23,220
y luego diría que npm ejecuta usemin.

272
00:23:23,220 --> 00:23:29,257
Y este script en particular construirá mi carpeta

273
00:23:29,257 --> 00:23:36,171
de distribución, cuyo contenido se puede copiar a mi servidor web para resolver mi tono.

274
00:23:36,171 --> 00:23:39,238
Guarde los cambios.

275
00:23:39,238 --> 00:23:45,837
Veamos ahora cómo construimos el sitio web.

276
00:23:45,837 --> 00:23:49,431
En este punto, para construir nuestro sitio web y

277
00:23:49,431 --> 00:23:55,950
el símbolo del sistema es simplemente escriba npm run build y luego simplemente ejecute.

278
00:23:55,950 --> 00:24:00,430
Ese script, que a su vez ejecutará un conjunto

279
00:24:00,430 --> 00:24:05,440
de cualquiera de los scripts, que a su vez completará todo el conjunto

280
00:24:05,440 --> 00:24:10,870
de tareas que deben ejecutarse para preparar mi carpeta de distribución.

281
00:24:10,870 --> 00:24:13,690
Entonces, sigamos adelante y ejecutemos esto y

282
00:24:13,690 --> 00:24:18,520
luego esto se ejecutará a través de todos los diferentes scripts allí.

283
00:24:18,520 --> 00:24:23,320
Se tarda unos minutos en completarse y, cuando se complete, la

284
00:24:23,320 --> 00:24:29,838
carpeta de distribución estará lista para su implementación en el servidor web.

285
00:24:29,838 --> 00:24:34,950
Ir a nuestro editor,

286
00:24:34,950 --> 00:24:38,750
ahora ve que la carpeta de distribución está lista.

287
00:24:38,750 --> 00:24:44,020
Dentro de la carpeta de distribución verá los tres archivos de índice,

288
00:24:44,020 --> 00:24:48,580
y en la carpeta CSS, verá el único archivo llamado m ain.css,

289
00:24:48,580 --> 00:24:55,050
que contiene todos los Bootstraps CSS, Bootstraps CSS

290
00:24:55,050 --> 00:24:57,660
y el código CSS que ha creado.

291
00:24:58,690 --> 00:25:01,863
Y la carpeta JS contendrá el main.js,

292
00:25:01,863 --> 00:25:05,287
que contiene el Bootstrap, el jQuery y

293
00:25:05,287 --> 00:25:10,905
todo el montón de código JavaScript combinado en un solo archivo.

294
00:25:10,905 --> 00:25:15,638
La imagen contendrá las imágenes optimizadas, y las fuentes, obviamente,

295
00:25:15,638 --> 00:25:18,730
que ha visto anteriormente, contienen los archivos de fuentes.

296
00:25:18,730 --> 00:25:24,030
Ahora, echemos un vistazo rápido a index.html que se ha creado aquí.

297
00:25:24,030 --> 00:25:27,290
Entonces, cuando mires el index.html que se ha creado aquí,

298
00:25:27,290 --> 00:25:31,120
notarás que todo es literalmente ilegible,

299
00:25:32,530 --> 00:25:37,850
porque cuando hiciste HTML min ha quitado todos los

300
00:25:39,500 --> 00:25:42,800
comentarios extraños, ha quitado todos los espacios, y

301
00:25:42,800 --> 00:25:48,100
luego creó todo este conjunto de ejecución de caracteres.

302
00:25:49,540 --> 00:25:52,800
Para la computadora no hace ninguna diferencia porque representará esta

303
00:25:52,800 --> 00:25:55,190
página web igual de bien.

304
00:25:55,190 --> 00:25:58,727
Para ti y para mí, hace una diferencia, porque no podemos leer esto fácilmente.

305
00:26:01,038 --> 00:26:05,620
Entonces esto es lo que la minificación causa a su archivo HTML.

306
00:26:05,620 --> 00:26:08,180
Echemos un vistazo al main.css.

307
00:26:08,180 --> 00:26:12,200
Cuando miras el main.css, ves que todo se cruje

308
00:26:12,200 --> 00:26:15,090
en una sola unidad, a medida que vas al fondo.

309
00:26:16,300 --> 00:26:20,808
Si usted es lo suficientemente valiente, vaya a la parte inferior y luego verá la,

310
00:26:24,793 --> 00:26:29,683
Verá horas específicamente escritas

311
00:26:29,683 --> 00:26:34,870
clases CSS justo abajo en la parte inferior aquí.

312
00:26:37,220 --> 00:26:42,801
Justo ahí, reconoces el botón del carrusel, y otras cosas,

313
00:26:42,801 --> 00:26:49,693
nabber-dark, y otras cosas allí, así que todo está metido en.

314
00:26:49,693 --> 00:26:52,896
Así que eso es lo que la minificación, y los costos.

315
00:26:52,896 --> 00:26:55,530
Main.js, lo mismo.

316
00:26:55,530 --> 00:26:56,545
Código ilegible allí.

317
00:26:56,545 --> 00:26:59,440
Su computadora, no hay diferencia.

318
00:26:59,440 --> 00:27:03,580
Así que con esto, nuestra carpeta de distribución ahora está completa.

319
00:27:03,580 --> 00:27:06,250
Echemos un vistazo a nuestra carpeta de distribución.

320
00:27:06,250 --> 00:27:08,669
Afortunadamente, tenemos nuestro servidor de luz ya funcionando.

321
00:27:08,669 --> 00:27:12,014
Entonces, lo que voy a hacer es ir al navegador y

322
00:27:12,014 --> 00:27:16,867
luego revisar el archivo CLM listo índice en esta carpeta de distribución para

323
00:27:16,867 --> 00:27:20,507
ver si se está renderizando correctamente o no.

324
00:27:20,507 --> 00:27:25,870
Ir al navegador, en mi barra de direcciones escribiré,

325
00:27:25,870 --> 00:27:31,440
dist index.html, y

326
00:27:31,440 --> 00:27:36,920
notaré que este archivo en particular es el

327
00:27:36,920 --> 00:27:40,680
archivo de distribución que se ha creado, y contiene exactamente lo mismo y se

328
00:27:40,680 --> 00:27:47,370
renderiza exactamente de la misma manera que nuestra página web original que creamos.

329
00:27:47,370 --> 00:27:52,230
Acerca de, de manera similar, observe que este aboutus.html es de la

330
00:27:52,230 --> 00:27:57,490
carpeta de distribución y esto se representa exactamente como antes,

331
00:27:57,490 --> 00:28:01,350
y también el archivo contactus.html.

332
00:28:01,350 --> 00:28:03,360
Todo funciona perfectamente.

333
00:28:03,360 --> 00:28:08,970
Así que ahora todo lo que le queda para implementar su página web,

334
00:28:08,970 --> 00:28:15,530
o su sitio web, es simplemente copiar el contenido de la carpeta dist,

335
00:28:15,530 --> 00:28:19,460
y luego subirlo a su servidor web, y

336
00:28:19,460 --> 00:28:24,830
luego su servidor web está funcionando, sirviendo su sitio web.

337
00:28:26,080 --> 00:28:28,740
Con esto, completamos este ejercicio.

338
00:28:28,740 --> 00:28:33,620
En este ejercicio, vimos cómo podemos hacer uso de

339
00:28:33,620 --> 00:28:38,636
scripts NBM para construir e implementar nuestro sitio web.

340
00:28:38,636 --> 00:28:40,610
Este puede ser un buen momento

341
00:28:40,610 --> 00:28:45,223
para que usted haga un Get Comment con mensajes NPM Scripts, Parte 2.

342
00:28:45,223 --> 00:28:50,815
[ MÚSICA]