1
00:00:03,510 --> 00:00:06,510
Continuemos nuestros gruñidos.

2
00:00:06,510 --> 00:00:11,175
Como hicimos en la segunda parte del ejercicio de scripts de NPM,

3
00:00:11,175 --> 00:00:14,660
en esta segunda parte de ese ejercicio de gruñido,

4
00:00:14,660 --> 00:00:17,080
vamos a configurar exactamente las mismas tareas.

5
00:00:17,080 --> 00:00:20,475
Vamos a hacer la limpieza de la carpeta de distribución,

6
00:00:20,475 --> 00:00:23,175
copiando las fuentes en la carpeta de distribución,

7
00:00:23,175 --> 00:00:29,780
luego también haremos la minificación de nuestras imágenes usando imagemin,

8
00:00:29,780 --> 00:00:37,530
y luego usaremos la tarea usemin para construir y preparar nuestra carpeta de distribución.

9
00:00:37,530 --> 00:00:40,420
Continuando con nuestro ejercicio,

10
00:00:40,420 --> 00:00:43,590
instalaré un par de módulos gruñidos.

11
00:00:43,590 --> 00:00:49,990
Entonces, instalemos NPM, install-grunt-contrib-copy.

12
00:00:51,110 --> 00:01:00,665
Esto se utiliza para copiar los archivos y luego grunt-contrib-clean,

13
00:01:00,665 --> 00:01:04,575
y menos save-dev.

14
00:01:04,575 --> 00:01:06,655
Y una vez que estos dos estén instalados,

15
00:01:06,655 --> 00:01:10,595
seguiremos adelante y configuraremos las tareas correspondientes. Al

16
00:01:10,595 --> 00:01:12,800
ir a su archivo gruñido,

17
00:01:12,800 --> 00:01:19,770
vamos a agregar en la configuración tanto para la copia como para las tareas de limpieza.

18
00:01:19,770 --> 00:01:22,895
Entonces, comenzando con la coma,

19
00:01:22,895 --> 00:01:26,295
siempre recuerde no olvidar la coma.

20
00:01:26,295 --> 00:01:30,360
Volverá a morderte en los momentos equivocados si haces eso.

21
00:01:30,360 --> 00:01:32,245
Así que vamos a configurar la tarea de copia.

22
00:01:32,245 --> 00:01:38,180
Para la copia, usemin espera que también mantengamos

23
00:01:38,180 --> 00:01:41,110
nuestros archivos HTML copiados en la carpeta de distribución para

24
00:01:41,110 --> 00:01:44,760
que pueda manipular eso.

25
00:01:44,760 --> 00:01:47,250
Por lo tanto, en este caso,

26
00:01:47,250 --> 00:01:48,630
vamos a copiar primero

27
00:01:48,630 --> 00:01:53,440
los archivos HTML de nuestra carpeta de proyecto a la carpeta de distribución.

28
00:01:53,440 --> 00:01:55,330
Entonces, para hacer la copia,

29
00:01:55,330 --> 00:02:01,535
voy a configurar la parte HTML de ella.

30
00:02:01,535 --> 00:02:04,740
Por lo tanto, aquí es donde vamos a utilizar parte de

31
00:02:04,740 --> 00:02:09,920
la sintaxis gruñido para especificar los archivos que necesitan ser copiados.

32
00:02:09,920 --> 00:02:19,880
Entonces, digo archivos y también especifico las

33
00:02:19,880 --> 00:02:23,560
llaves derecha, izquierda y derecha allí, así que dentro de esto,

34
00:02:23,560 --> 00:02:27,855
necesito especificar ahora cierta configuración.

35
00:02:27,855 --> 00:02:37,600
Entonces, yo diría, expanda true y dot true, luego CWD,

36
00:02:37,600 --> 00:02:42,015
el directorio de trabajo actual es dot slash,

37
00:02:42,015 --> 00:02:44,440
y luego, después de eso,

38
00:02:44,440 --> 00:02:51,730
configuraremos el siguiente que es SRC, los archivos fuente,

39
00:02:51,730 --> 00:02:56,690
y luego los archivos fuente son star.html,

40
00:02:56,690 --> 00:02:59,325
todos los archivos HTML,

41
00:02:59,325 --> 00:03:05,850
y luego vamos a copiarlos a la carpeta dist.

42
00:03:05,850 --> 00:03:10,135
Entonces, es por eso que el destino se establece en la carpeta de distribución aquí.

43
00:03:10,135 --> 00:03:12,385
Entonces, con esta configuración,

44
00:03:12,385 --> 00:03:18,880
mi tarea de copia copiará todos los archivos HTML a la carpeta de distribución.

45
00:03:18,880 --> 00:03:22,285
Ahora, junto con eso, también necesitamos copiar las fuentes.

46
00:03:22,285 --> 00:03:26,200
Por lo tanto, configuraré el segundo para las fuentes.

47
00:03:26,200 --> 00:03:31,090
Por lo tanto, especifico fuentes y luego aquí también necesito especificar

48
00:03:31,090 --> 00:03:37,500
los archivos que deben copiarse y así decimos archivos,

49
00:03:37,500 --> 00:03:41,780
y luego estos son

50
00:03:41,780 --> 00:03:47,465
algunos parámetros de configuración que necesita configurar para la tarea de copia.

51
00:03:47,465 --> 00:03:49,225
Ahora, si necesita entender,

52
00:03:49,225 --> 00:03:54,510
luego leyendo la documentación para el complemento gruñido correspondiente,

53
00:03:54,510 --> 00:03:57,650
podrá resolver esto y así o

54
00:03:57,650 --> 00:04:00,960
simplemente puede seguir el ejemplo que estoy dando aquí.

55
00:04:00,960 --> 00:04:05,350
Entonces, punto verdadero, y luego CWD,

56
00:04:05,350 --> 00:04:14,780
el directorio de trabajo actual es módulos de nodo y fuente impresionante.

57
00:04:14,780 --> 00:04:18,295
Entonces de ahí es donde voy a copiar los archivos,

58
00:04:18,295 --> 00:04:27,180
y luego el origen de los archivos es el fontsstar.star,

59
00:04:27,180 --> 00:04:30,310
esos son los archivos que necesito copiar,

60
00:04:30,310 --> 00:04:38,370
y el destino es la carpeta de distribución.

61
00:04:38,370 --> 00:04:42,050
Entonces, con esto, he configurado mi tarea de copia para copiar

62
00:04:42,050 --> 00:04:47,490
los archivos HTML y los archivos de fuentes en mi carpeta de distribución.

63
00:04:47,490 --> 00:04:52,370
Ahora, la siguiente tarea que voy a configurar es la tarea limpia.

64
00:04:52,370 --> 00:04:56,290
Por lo tanto, permítanme configurar la tarea limpia.

65
00:04:56,540 --> 00:05:05,825
Para la tarea limpia, configuraré la compilación,

66
00:05:05,825 --> 00:05:13,460
y luego diré que la fuente es la carpeta de distribución.

67
00:05:13,460 --> 00:05:19,660
Por lo tanto, esencialmente especificando que la carpeta de distribución debe limpiarse.

68
00:05:19,830 --> 00:05:27,835
Por lo tanto, ahora hemos configurado la copia y las tareas de limpieza, así que vamos a guardar los cambios.

69
00:05:27,835 --> 00:05:31,530
La siguiente tarea que voy a configurar es la tarea imagemin.

70
00:05:31,530 --> 00:05:40,030
Esto es lo que usaremos para comprimir y copiar las imágenes en la carpeta de distribución.

71
00:05:40,030 --> 00:05:44,200
Para comenzar con la tarea imagemin, el primer paso,

72
00:05:44,200 --> 00:05:49,910
instale el complemento gruñido correspondiente.

73
00:05:49,910 --> 00:06:00,520
Entonces, gruño-contrib-imagemin, menos save.dev.

74
00:06:00,520 --> 00:06:03,470
Y una vez instalado,

75
00:06:03,470 --> 00:06:07,330
entonces vamos a seguir adelante y configurar la tarea de imagemin correspondiente.

76
00:06:07,330 --> 00:06:12,015
Ir a nuestro archivo gruñido después de la configuración para la tarea limpia,

77
00:06:12,015 --> 00:06:15,620
voy a configurar la tarea imagemin.

78
00:06:15,620 --> 00:06:18,050
Entonces, diré imagemin,

79
00:06:19,460 --> 00:06:22,055
y luego justo allí,

80
00:06:22,055 --> 00:06:26,225
especificaré dinámico,

81
00:06:26,225 --> 00:06:30,950
y dentro de allí especificaré los archivos para que pueda

82
00:06:30,950 --> 00:06:36,010
ver que la especificación del archivo sería similar.

83
00:06:36,010 --> 00:06:39,130
Diría, expanda verdadero,

84
00:06:39,130 --> 00:06:46,830
entonces CWD es el directorio actual.

85
00:06:49,680 --> 00:06:58,350
Entonces la fuente de los archivos es imagestar.

86
00:07:00,840 --> 00:07:05,405
y luego entre corchetes, entre llaves,

87
00:07:05,405 --> 00:07:12,910
especifico PNG, GIF y JPG.

88
00:07:12,910 --> 00:07:17,000
Entonces, esencialmente, puede ver el patrón global del archivo aquí.

89
00:07:17,000 --> 00:07:18,640
Así que dice cualquier

90
00:07:18,640 --> 00:07:21,610
archivo PNG, GIF o JPG que coincida con este patrón y luego

91
00:07:21,610 --> 00:07:25,755
comienza punto que significa todos los archivos de ese patrón,

92
00:07:25,755 --> 00:07:29,280
y la fuente, y el destino,

93
00:07:29,280 --> 00:07:34,310
configuré como la carpeta de distribución.

94
00:07:34,310 --> 00:07:37,790
Así que con esto, hemos configurado nuestra

95
00:07:37,790 --> 00:07:39,425
tarea de copia, limpieza e imagemin.

96
00:07:39,425 --> 00:07:46,670
Vamos a configurar una tarea aquí llamada compilación.

97
00:07:46,670 --> 00:07:49,365
Por lo tanto, yo diría, registrar tarea,

98
00:07:49,365 --> 00:07:55,700
gruñir tarea y luego nombraré la tarea como compilación,

99
00:07:55,700 --> 00:07:57,695
y luego dentro de esto,

100
00:07:57,695 --> 00:08:03,160
especificaremos los pasos de configuración que debe realizar la tarea de compilación.

101
00:08:03,160 --> 00:08:09,105
Así que, justo ahí, punto y coma y luego ahí dentro,

102
00:08:09,105 --> 00:08:13,685
especificaré las tres tareas en la secuencia que deben realizarse.

103
00:08:13,685 --> 00:08:16,650
Primero, diré, limpio.

104
00:08:16,650 --> 00:08:19,420
Por lo tanto, limpiaremos la carpeta de distribución

105
00:08:19,420 --> 00:08:22,340
y luego comenzaremos a reconstruir la carpeta de distribución.

106
00:08:22,340 --> 00:08:27,320
Limpio, entonces la siguiente tarea sería

107
00:08:27,320 --> 00:08:36,980
copiar y luego después de eso lo haría, imagemin.

108
00:08:37,380 --> 00:08:41,340
Así que estas tres tareas se configuran aquí.

109
00:08:41,340 --> 00:08:43,910
Así que con esto, déjame guardar los cambios.

110
00:08:43,910 --> 00:08:46,590
Veamos cómo funciona esta cosa.

111
00:08:46,590 --> 00:08:50,280
Ahora, yendo al indicador si escribo,

112
00:08:50,280 --> 00:08:57,955
gruñendo y compilando, verá que primero hará la limpieza,

113
00:08:57,955 --> 00:09:01,550
luego hacer la copia y hacer la tarea imagemin.

114
00:09:01,550 --> 00:09:05,600
Entonces, hace todos estos tres y luego vería inmediatamente que

115
00:09:05,600 --> 00:09:11,810
la carpeta de distribución está construida en mi carpeta de proyecto aquí.

116
00:09:11,810 --> 00:09:15,200
Y dentro de la carpeta de distribución se puede ver que las fuentes se han copiado,

117
00:09:15,200 --> 00:09:16,590
las imágenes se han copiado y

118
00:09:16,590 --> 00:09:20,665
los tres archivos HTML se han copiado en la carpeta de distribución.

119
00:09:20,665 --> 00:09:22,350
Sólo estás a mitad de camino.

120
00:09:22,350 --> 00:09:29,370
Ahora, tenemos que ser capaces de procesar estos archivos usando el plugin usemin.

121
00:09:29,370 --> 00:09:31,675
Entonces, vayamos a eso siguiente.

122
00:09:31,675 --> 00:09:35,140
Ahora, voy a instalar algunos módulos NPM

123
00:09:35,140 --> 00:09:38,555
que son útiles para construir la carpeta de distribución.

124
00:09:38,555 --> 00:09:42,225
Entonces, para hacer eso, diría instalar NPM.

125
00:09:42,225 --> 00:09:47,120
Puedo especificar un conjunto de módulos aquí así que,

126
00:09:47,120 --> 00:09:52,300
diría, grunt-contrib-concat.

127
00:09:52,300 --> 00:10:01,000
Entonces, esto se usa para concatenar archivos, luego grunt-contrib-cssmin,

128
00:10:01,000 --> 00:10:13,512
grunt-contrib-htmlmin, luego decir, grunt-contrib-uglify.

129
00:10:13,512 --> 00:10:18,240
Entonces gruño-filerev.

130
00:10:18,240 --> 00:10:21,910
Verá la razón para usar filerev en poco tiempo,

131
00:10:21,910 --> 00:10:32,925
y luego grunt-usemin, y guardará def y luego

132
00:10:35,475 --> 00:10:40,050
instalará todos estos módulos gruñidos.

133
00:10:40,050 --> 00:10:42,205
Una vez que todos ellos han sido instalados,

134
00:10:42,205 --> 00:10:44,305
el siguiente paso es ir y configurar,

135
00:10:44,305 --> 00:10:47,625
tarea usemin que también utiliza

136
00:10:47,625 --> 00:10:55,090
las tareas cssmin Uglify Concat para llevar a cabo la construcción de la carpeta de distribución.

137
00:10:55,090 --> 00:10:59,140
Ahora, vamos a continuar configurando la tarea usemin.

138
00:10:59,140 --> 00:11:03,750
Así que volviendo al archivo gruñido después de imagemin,

139
00:11:03,750 --> 00:11:10,950
voy a agregar en la siguiente tarea para que usemin trabaje con el gruñido.

140
00:11:10,950 --> 00:11:17,165
La primera tarea que necesito configurar se llama UseMinPrepare.

141
00:11:19,145 --> 00:11:25,175
Esta tarea UseMinPrepare preparará los archivos y luego también configurará

142
00:11:25,175 --> 00:11:32,655
los plugins conCache CSS min y Uglify y ref de archivo,

143
00:11:32,655 --> 00:11:35,070
para que puedan hacer su trabajo correctamente.

144
00:11:35,070 --> 00:11:36,915
Por lo tanto, esa es la razón de USEminPrepare.

145
00:11:36,915 --> 00:11:42,220
Por lo tanto, así es como se ha diseñado el plugin de concesión usemin.

146
00:11:42,220 --> 00:11:48,340
Algo diferente de la forma en que el usemin que usamos con los scripts finales del juego wooks.

147
00:11:48,340 --> 00:11:50,295
Entonces, en USEminPrepare,

148
00:11:50,295 --> 00:11:59,590
solo algún nombre aleatorio que voy a usar y luego decir que el destino es dist.

149
00:11:59,590 --> 00:12:08,730
Y luego especificaría la fuente como todos los archivos html aquí.

150
00:12:08,730 --> 00:12:13,605
Así que diría contactus.html

151
00:12:14,875 --> 00:12:23,550
, aboutus.html y index.html.

152
00:12:23,550 --> 00:12:26,915
Por lo tanto, todos estos tres archivos deben ser procesados.

153
00:12:26,915 --> 00:12:30,765
La siguiente parte de esta configuración de usemin, la configuración

154
00:12:30,765 --> 00:12:37,735
UseMinPrepare es donde especifico las opciones.

155
00:12:38,115 --> 00:12:43,245
Esto es algo que he descubierto por prueba y error.

156
00:12:44,995 --> 00:12:47,395
Sólo tienes que seguir los pasos.

157
00:12:47,395 --> 00:12:48,845
Así que necesito configurar

158
00:12:48,845 --> 00:12:54,125
algunas cosas aquí dentro donde necesito configurar algo llamado Flow.

159
00:12:54,125 --> 00:13:00,695
Y luego dentro de allí necesito configurar otra parte llamada Pasos,

160
00:13:00,695 --> 00:13:07,875
y luego aquí especifico los pasos aquí y luego digo cssmin,

161
00:13:07,915 --> 00:13:14,645
y luego diré que js es uglify.

162
00:13:14,645 --> 00:13:21,515
Entonces, esto es algo que necesito especificar aquí y luego después de esto digo post,

163
00:13:24,405 --> 00:13:29,695
y aquí puedo permitir que esto proporcione

164
00:13:29,695 --> 00:13:36,475
algunas opciones para sus tareas específicas que he configurado.

165
00:13:36,475 --> 00:13:40,175
Por lo tanto, estoy proporcionando algunas opciones adicionales para css.

166
00:13:40,175 --> 00:13:44,540
Por lo tanto, eso se suministra dentro de la publicación aquí.

167
00:13:44,540 --> 00:13:49,485
Ahora, de nuevo, así es como se tiene que hacer la configuración.

168
00:13:49,485 --> 00:13:52,695
Por lo tanto, acabamos de aprender mirando la documentación allí.

169
00:13:52,695 --> 00:13:55,390
Entonces, aquí dentro de la publicación css,

170
00:13:55,390 --> 00:13:59,275
especificaría un nombre como cssmin.

171
00:13:59,275 --> 00:14:01,450
Hasta ahora, esto aquí es una tarea cssmin.

172
00:14:01,450 --> 00:14:07,974
Yo diría createConfig:

173
00:14:08,775 --> 00:14:17,005
bloque de contexto de función, y luego dentro de esa función

174
00:14:17,005 --> 00:14:19,955
tengo que proporcionar ciertos parámetros.

175
00:14:19,955 --> 00:14:22,175
Por lo tanto, diría que

176
00:14:22,175 --> 00:14:31,835
generador de opciones de contexto generadas por var.

177
00:14:31,835 --> 00:14:34,685
Entonces, esta es una variable de JavaScript que necesito

178
00:14:34,685 --> 00:14:38,705
especificar allí, objeto JavaScript esencialmente.

179
00:14:38,705 --> 00:14:44,185
Por lo tanto, este objeto contiene esta propiedad llamada opciones,

180
00:14:44,185 --> 00:14:48,005
donde puedo especificar algunas opciones que se pasan

181
00:14:48,005 --> 00:14:51,485
a la tarea mínima CSS asignada por la tarea de preparación usemin.

182
00:14:51,485 --> 00:14:56,310
Entonces, allí, mantenga

183
00:14:56,310 --> 00:15:02,105
comentarios especiales y luego, la

184
00:15:05,655 --> 00:15:08,635
rebase es falsa.

185
00:15:08,635 --> 00:15:16,025
Aparentemente, necesito proporcionar esto para que mi tarea cssmin maneje actualmente

186
00:15:16,025 --> 00:15:23,855
la impresionante modificación e inclusión de la fuente en el archivo concatenado.

187
00:15:23,855 --> 00:15:25,390
Si no hago esto,

188
00:15:25,390 --> 00:15:29,380
parece romper la fuente impresionante y esto es algo que descubrí,

189
00:15:29,380 --> 00:15:31,890
haciendo un poco de

190
00:15:31,890 --> 00:15:37,285
investigación sobre el desbordamiento de la pila y algunos de estos lugares y descubrí

191
00:15:37,285 --> 00:15:42,505
que su problema que está siendo causado con la fuente impresionante se puede

192
00:15:42,505 --> 00:15:48,619
arreglar incluyendo esto en mi configuración gruñido.

193
00:15:48,619 --> 00:15:51,445
Por lo tanto, de nuevo acabo de buscar

194
00:15:51,445 --> 00:15:55,810
las sugerencias de algunas personas que han intentado y solucionar el problema.

195
00:15:55,810 --> 00:15:58,465
Por lo tanto, si te encuentras con problemas como este,

196
00:15:58,465 --> 00:16:02,675
esta es una forma de resolver los problemas que podrían surgir cuando

197
00:16:02,675 --> 00:16:07,525
trabajas con estas diversas herramientas.

198
00:16:07,525 --> 00:16:14,710
Permítanme añadir la siguiente tarea para Concat.

199
00:16:14,710 --> 00:16:21,180
Voy a especificar algunas cosas aquí y opciones.

200
00:16:21,180 --> 00:16:28,135
Especifiqué este punto y coma,

201
00:16:28,135 --> 00:16:31,215
por lo que esto es algo que necesito especificar para Concat,

202
00:16:31,215 --> 00:16:37,725
y luego también después de

203
00:16:37,725 --> 00:16:43,180
las opciones especifico dist como vacío.

204
00:16:43,180 --> 00:16:48,385
Ahora estas opciones de Concat serán configuradas por el USEminPrepare que se ejecuta anteriormente.

205
00:16:48,385 --> 00:16:50,435
Así que podemos dejar la mayor parte en blanco allí,

206
00:16:50,435 --> 00:16:54,005
y luego eso sería reconfigurado por UseMinPrepare.

207
00:16:54,005 --> 00:16:57,005
El siguiente es feo.

208
00:16:57,665 --> 00:17:06,055
Dentro uglify también solo necesito especificar este dist como vacío.

209
00:17:06,055 --> 00:17:08,255
Si no especifico estos,

210
00:17:08,255 --> 00:17:12,890
entonces la tarea usemin no funciona correctamente.

211
00:17:12,890 --> 00:17:16,785
Entonces, es por eso que necesito especificar todas estas cosas explícitamente.

212
00:17:16,785 --> 00:17:21,905
Entonces, para cssmin también diría dist empty.

213
00:17:21,905 --> 00:17:29,005
Y luego, la siguiente tarea que voy a configurar se llama filerev.

214
00:17:29,625 --> 00:17:36,725
Entonces, me viste instalando el plugin filerev para Grunt.

215
00:17:36,725 --> 00:17:38,480
¿ Qué hace este filerev?

216
00:17:38,480 --> 00:17:44,640
Lo que hace el filerev es cuando usemin prepara el archivo main.css y main.js,

217
00:17:44,640 --> 00:17:53,170
lo que filerev hace es agregar una extensión adicional a ese nombre principal, de

218
00:17:53,170 --> 00:18:02,070
modo que cuando prepare una nueva versión de su sitio web y lo suba a la página web,

219
00:18:02,070 --> 00:18:05,895
en caso de que alguien haya visto su sitio web antes,

220
00:18:05,895 --> 00:18:12,030
entonces su navegador podría haber cobrado los archivos main.css y main.js.

221
00:18:12,030 --> 00:18:15,675
Si no adjunta este filerev lo que sucede es que,

222
00:18:15,675 --> 00:18:21,480
el navegador debajo descarga la nueva versión de su página web.

223
00:18:21,480 --> 00:18:24,605
Puede que no descargue los archivos main.js y main.css

224
00:18:24,605 --> 00:18:28,515
porque los encuentra ya en su caché local.

225
00:18:28,515 --> 00:18:31,820
Por lo tanto, es posible que su página web no se renderice correctamente.

226
00:18:31,820 --> 00:18:33,725
Por lo tanto, para lidiar con el problema,

227
00:18:33,725 --> 00:18:37,535
lo que hacemos es cada vez que preparamos una nueva carpeta de distribución,

228
00:18:37,535 --> 00:18:41,235
agregaremos una revisión de archivo.

229
00:18:41,235 --> 00:18:43,045
Eso es lo que significa el filerev,

230
00:18:43,045 --> 00:18:44,985
el número de revisión del archivo,

231
00:18:44,985 --> 00:18:54,100
como una extensión adicional al nombre de esos archivos css y js.

232
00:18:54,100 --> 00:18:56,950
El main.ss y main.js archivan el pre-preparado.

233
00:18:56,950 --> 00:18:58,820
Así que eso es lo que hace el filerev.

234
00:18:58,820 --> 00:19:02,440
Ahora, ¿cómo puede este filerev calcular este valor?

235
00:19:02,440 --> 00:19:07,685
Toma el contenido de estos archivos y luego hace algún procesamiento y luego genera

236
00:19:07,685 --> 00:19:14,655
un número md5 comprimido de 20 caracteres que se adjuntará al archivo principal.

237
00:19:14,655 --> 00:19:17,440
Así que voy a configurar esa parte aquí.

238
00:19:17,440 --> 00:19:20,245
Entonces, en las opciones,

239
00:19:20,245 --> 00:19:30,990
especifico aquí diciendo cómo se supone que debe calcular este número allí.

240
00:19:30,990 --> 00:19:33,740
Entonces, digo codificación utf8,

241
00:19:33,740 --> 00:19:40,150
y luego digo algoritmo que usó para calcular este hash,

242
00:19:40,150 --> 00:19:43,544
lo que llamamos como hash es md5.

243
00:19:43,544 --> 00:19:47,060
Ahora, será más claro cuando ejecutemos

244
00:19:47,060 --> 00:19:53,020
la tarea usemin y luego veamos lo que hace, longitud 20.

245
00:19:53,020 --> 00:19:55,475
Entonces, volveré y explicaré qué

246
00:19:55,475 --> 00:19:59,460
hace esto cuando ejecutemos la tarea usemin.

247
00:19:59,460 --> 00:20:06,790
Así que, déjame terminar las opciones aquí y luego diría liberación.

248
00:20:06,790 --> 00:20:10,855
Por lo tanto, necesito configurar algunas cosas más aquí y luego liberar,

249
00:20:10,855 --> 00:20:18,150
y luego necesito especificar los archivos para los que mi filerev debería actuar.

250
00:20:18,150 --> 00:20:20,625
Por lo tanto, yo diría archivos filerev.

251
00:20:20,625 --> 00:20:22,005
Así que, dentro de aquí archivo.

252
00:20:22,005 --> 00:20:26,645
Por lo tanto, está empezando a ver un patrón en la forma en que las cosas se especifican aquí.

253
00:20:26,645 --> 00:20:28,640
Entonces, cuando especifique los archivos aquí,

254
00:20:28,640 --> 00:20:30,775
dirá la fuente,

255
00:20:30,775 --> 00:20:37,815
y luego allí especificará dist CSS

256
00:20:37,815 --> 00:20:41,025
y luego estrella punto CSS,

257
00:20:41,025 --> 00:20:47,295
y luego el siguiente dist js*.js.

258
00:20:47,295 --> 00:20:51,225
Entonces, con esto, ha configurado el filerev.

259
00:20:51,225 --> 00:20:53,625
Entonces, la parte filerev está configurada.

260
00:20:53,625 --> 00:20:58,820
Y finalmente, tenemos que configurar la tarea usemin.

261
00:20:58,820 --> 00:21:00,795
Entonces, para configurar la tarea usemin,

262
00:21:00,795 --> 00:21:04,125
voy aquí abajo y digo usemin,

263
00:21:04,125 --> 00:21:09,100
y aquí me permito especificar algunas opciones para la tarea usemin.

264
00:21:09,100 --> 00:21:12,470
Entonces, aquí especifico html.

265
00:21:12,470 --> 00:21:21,205
Entonces, aquí estoy especificando qué archivos necesita cambiar,

266
00:21:22,255 --> 00:21:25,455
necesita actualizar.

267
00:21:25,455 --> 00:21:32,465
Por lo tanto, los archivos que se han copiado en la carpeta de distribución.

268
00:21:33,290 --> 00:21:41,975
Y el último es «dist/index.html».

269
00:21:41,975 --> 00:21:50,300
Entonces estos son los tres archivos que se supone que debe procesar,

270
00:21:50,510 --> 00:21:55,095
y luego algunas opciones para esto aquí.

271
00:21:55,095 --> 00:22:04,970
Por lo tanto, las opciones que especificaré «AssetsDirs.»

272
00:22:04,970 --> 00:22:10,520
Entonces, aquí es donde existen todos los activos que estoy usando.

273
00:22:10,520 --> 00:22:14,355
Por lo tanto, existen los archivos CSS y JavaScript.

274
00:22:14,355 --> 00:22:21,715
Entonces, especificaré «dist/css» y «dist/js».

275
00:22:21,715 --> 00:22:27,020
Con esto, ha completado la configuración de la tarea «usemin».

276
00:22:27,020 --> 00:22:30,930
A continuación, configuramos la tarea «htmlmin».

277
00:22:30,930 --> 00:22:32,870
Para la tarea «htmlmin»,

278
00:22:32,870 --> 00:22:37,160
especificamos el destino que es «dist», la carpeta de distribución

279
00:22:37,160 --> 00:22:40,140
y el «htmlmin» a realizar en

280
00:22:40,140 --> 00:22:44,690
todos los archivos HTML que están en esa carpeta de distribución.

281
00:22:44,690 --> 00:22:49,560
Las opciones que especificamos para este estado que, diremos,

282
00:22:49,560 --> 00:22:53,945
«CollapsedWhiteSpace: True» significa que

283
00:22:53,945 --> 00:22:58,715
todo el espacio en blanco de los archivos HTML se colapsaría, de

284
00:22:58,715 --> 00:23:04,670
tal manera que el [inaudible] contiene sólo el código HTML mínimo allí.

285
00:23:04,670 --> 00:23:08,095
La modificación esencialmente elimina

286
00:23:08,095 --> 00:23:12,390
todos los caracteres extraños de los archivos «htmlmin».

287
00:23:12,390 --> 00:23:16,570
Ahora, también especificamos ese diccionario de archivos,

288
00:23:16,570 --> 00:23:18,880
aquellos archivos que necesitan ser configurados.

289
00:23:18,880 --> 00:23:22,910
Esto se especifica como destino, dos puntos, origen.

290
00:23:22,910 --> 00:23:28,835
Por lo tanto, especificamos «dist/index.html»: «dist/index.html»,

291
00:23:28,835 --> 00:23:32,335
lo que significa que el «index.html» en la carpeta de distribución

292
00:23:32,335 --> 00:23:36,900
será [inaudible] y luego volverá a colocarlo en el archivo «index.html»,

293
00:23:36,900 --> 00:23:39,025
también en la carpeta de distribución.

294
00:23:39,025 --> 00:23:45,290
Del mismo modo, el «contactus.html» especificado allí y luego el

295
00:23:45,290 --> 00:23:51,965
«aboutus.html» también especificado como se muestra en esa lista de archivos.

296
00:23:51,965 --> 00:23:56,760
La razón por la que realizamos «htmlmin» después de terminar «usemin»

297
00:23:56,760 --> 00:24:01,985
es porque «usemin» reemplazará todos los scripts

298
00:24:01,985 --> 00:24:06,925
con el archivo principal «.js» y también todo ese

299
00:24:06,925 --> 00:24:12,535
código CSS concatenado y combinado y reemplazado por el archivo principal «.css».

300
00:24:12,535 --> 00:24:15,490
Por lo tanto, el «htmlmin» se realizará en

301
00:24:15,490 --> 00:24:20,840
los archivos HTML resultantes después de que «usemin» haya completado su trabajo.

302
00:24:20,840 --> 00:24:24,605
Así es como funciona esto en Grunt.

303
00:24:24,605 --> 00:24:31,060
Por lo tanto, el Grunt «htmlmin» debe aplicarse después de que el «usemin» haya completado su trabajo.

304
00:24:31,060 --> 00:24:34,080
Así que una vez que todos estos están configurados,

305
00:24:34,080 --> 00:24:40,185
entonces un pequeño paso que tengo que hacer es volver aquí,

306
00:24:40,185 --> 00:24:45,285
y luego donde especificamos para el «jit-gruñido»,

307
00:24:45,285 --> 00:24:50,005
necesitamos especificar que este «jit-gruñido»,

308
00:24:50,005 --> 00:24:53,290
recuerdas que introdujimos algo llamado

309
00:24:53,290 --> 00:24:57,500
«USEminPrepare» [inaudible] por lo que necesita informar al «jit-grunt»

310
00:24:57,500 --> 00:25:01,900
diciendo que la configuración «UseMinPrepare» que introdujimos va a ser

311
00:25:01,900 --> 00:25:06,430
manejada por ese plugin «grunt-usemin» en sí.

312
00:25:06,430 --> 00:25:08,575
Así que necesito especificar explícitamente, de

313
00:25:08,575 --> 00:25:14,260
lo contrario, «jit-grunt» buscará un plugin Grunt «UseMinPrepare».

314
00:25:14,260 --> 00:25:16,480
Entonces, para especificar eso,

315
00:25:16,480 --> 00:25:26,450
diría «UseMinPrepare» y diría «gruñido usemin»,

316
00:25:26,450 --> 00:25:30,950
esencialmente informando «jit-gruñido» diciendo que «UseMinPrepare» va a ser

317
00:25:30,950 --> 00:25:35,960
manejado por el plugin «gruño-usemin» allí.

318
00:25:35,960 --> 00:25:41,490
Finalmente, reconfiguremos la tarea de «compilación» en la parte inferior.

319
00:25:41,490 --> 00:25:46,520
Bajando a esa tarea de «compilación» después de «imagemin».

320
00:25:46,520 --> 00:25:49,530
Así que hicimos «limpiar», «copiar», «imagemin»,

321
00:25:49,530 --> 00:25:55,920
luego la siguiente tarea que debería ejecutar es «UseMinPrepare» y luego después de

322
00:25:55,920 --> 00:26:08,820
«UseMinPrepare» ejecutar «contacto», luego ejecuto «cssmin»,

323
00:26:08,820 --> 00:26:15,305
luego ejecuto «uglify».

324
00:26:15,305 --> 00:26:20,285
Así que ven que tenemos que hacerlo en un cierto conjunto de pasos.

325
00:26:20,285 --> 00:26:22,395
Una vez que los «cssmin» y «uglify» se ejecuten, se

326
00:26:22,395 --> 00:26:26,110
crearán los archivos principales «.css» y los archivos principales «.js».

327
00:26:26,110 --> 00:26:28,610
Así que en este punto, voy a ejecutar el

328
00:26:28,610 --> 00:26:37,290
«filerev» y luego finalmente ejecuto la tarea «usemin».

329
00:26:37,290 --> 00:26:40,475
Así que ves los secretos: «limpia», «copia»,

330
00:26:40,475 --> 00:26:43,690
«imagemin», «usemPrepara», «concat», «cssmin», «uglify».

331
00:26:43,690 --> 00:26:47,210
En este punto, los archivos «.css» y «.js»,

332
00:26:47,210 --> 00:26:49,815
los archivos principales «.css» y «.js» están listos.

333
00:26:49,815 --> 00:26:54,190
Puedo hacer el «filerev» en ellos y luego finalmente ejecutar el «usemin».

334
00:26:54,190 --> 00:26:58,790
Pero esto, guardemos los cambios y luego veamos

335
00:26:58,790 --> 00:27:03,960
cómo la tarea de «compilación» realmente prepara la distribución.

336
00:27:03,960 --> 00:27:06,855
[ inaudible] Al ir a nuestra terminal,

337
00:27:06,855 --> 00:27:13,605
en el indicador escribo «grunt build» y luego espero a que se ejecuten todas las tareas.

338
00:27:13,605 --> 00:27:16,870
Entonces vería que se ejecutará a través de todo el conjunto de tareas,

339
00:27:16,870 --> 00:27:19,320
y luego, finalmente, cuando esté hecho,

340
00:27:19,320 --> 00:27:24,950
simplemente especificará que todas las tareas están hechas.

341
00:27:24,950 --> 00:27:29,345
Así que si desea volver atrás y mirar la secuencia de las tareas que se han completado,

342
00:27:29,345 --> 00:27:31,760
puede simplemente desplazarse hacia atrás y ver lo que hace.

343
00:27:31,760 --> 00:27:33,885
Primero limpia,

344
00:27:33,885 --> 00:27:36,765
luego copia los archivos HTML,

345
00:27:36,765 --> 00:27:38,400
luego copia los archivos de fuentes,

346
00:27:38,400 --> 00:27:40,455
luego hace la tarea «imagemin»,

347
00:27:40,455 --> 00:27:42,550
luego hace la «USeminPrepare»,

348
00:27:42,550 --> 00:27:45,810
luego hace el «concat»,

349
00:27:45,830 --> 00:27:49,645
luego hace el «cssmin»,

350
00:27:49,645 --> 00:27:52,010
tanto la distribución como generado,

351
00:27:52,010 --> 00:27:54,130
y luego hace el» uglify»,

352
00:27:54,130 --> 00:28:01,060
luego «uglify» tarea, luego ejecuta la «filerev» y luego la tarea «usemin».

353
00:28:01,060 --> 00:28:03,920
Y entonces nuestra carpeta de distribución debería estar lista.

354
00:28:03,920 --> 00:28:07,775
Ir a nuestro editor,

355
00:28:07,775 --> 00:28:11,070
ahora ve que la carpeta de distribución se ha preparado.

356
00:28:11,070 --> 00:28:19,415
Veamos específicamente los principales archivos «.css» y «.js».

357
00:28:19,415 --> 00:28:22,060
Anote los nombres de estos archivos.

358
00:28:22,060 --> 00:28:23,590
Observe que después de main,

359
00:28:23,590 --> 00:28:25,080
hay un punto y luego hay

360
00:28:25,080 --> 00:28:30,500
un hash de 20 caracteres que ha sido agregado por «filerev» aquí.

361
00:28:30,500 --> 00:28:34,605
Entonces, lo que sucede es que si preparo una nueva carpeta de distribución,

362
00:28:34,605 --> 00:28:41,130
cada vez que preparo la nueva carpeta de distribución, este hash cambia,

363
00:28:41,130 --> 00:28:47,515
lo que significa que cada vez que implemento una nueva versión de mi sitio web,

364
00:28:47,515 --> 00:28:54,130
si algún navegador ha visto previamente mi sitio web, entonces sus entradas de caché,

365
00:28:54,130 --> 00:28:57,210
donde podría haber almacenado en caché el principal «.css» y principal «.js» se ha

366
00:28:57,210 --> 00:29:02,195
invalidado porque tenemos una nueva versión del principal «.css» y principal «.js».

367
00:29:02,195 --> 00:29:06,805
Entonces el navegador volverá a descargar estas cosas.

368
00:29:06,805 --> 00:29:10,455
No mostré el «filerev» con los scripts de NPM,

369
00:29:10,455 --> 00:29:15,940
pero acabo de agregarlo aquí solo para mostrarle cómo se hace con el Grunt.

370
00:29:15,940 --> 00:29:19,650
Así que con esto, completamos este ejercicio.

371
00:29:19,650 --> 00:29:26,035
Echemos un vistazo rápido al sitio en nuestro navegador. Al

372
00:29:26,035 --> 00:29:27,795
ir a su navegador,

373
00:29:27,795 --> 00:29:32,035
puede ver que ahora estoy cargando en «dist/index.html».

374
00:29:32,035 --> 00:29:34,200
Así que esto es de la carpeta de distribución,

375
00:29:34,200 --> 00:29:39,260
así que estoy comprobando y se ve bien.

376
00:29:39,260 --> 00:29:44,440
El «aboutus.html» también se ve bien, al igual que antes.

377
00:29:44,440 --> 00:29:51,060
Y la página de contacto también se ve bien preparada para la implementación.

378
00:29:51,060 --> 00:29:54,970
Así que con esto, completamos este ejercicio.

379
00:29:54,970 --> 00:29:57,365
Después de todos los gruñidos,

380
00:29:57,365 --> 00:30:00,560
estoy seguro de que necesitas recuperar el aliento.

381
00:30:00,560 --> 00:30:09,400
Antes de hacer eso, asegúrese de hacer un buen comentario con el mensaje «Gruñido segunda parte».