1
00:00:03,550 --> 00:00:06,380
Es hora de empezar a gruñir.

2
00:00:06,380 --> 00:00:10,280
En este y el siguiente ejercicio vamos a repetir

3
00:00:10,280 --> 00:00:15,925
el mismo tipo de configuración que hicimos con los scripts de NPM.

4
00:00:15,925 --> 00:00:22,405
En la primera parte, vamos a configurar la conversión de SCSS a CSS.

5
00:00:22,405 --> 00:00:28,570
Luego configuraremos una tarea de vigilancia y también serviremos el código usando la sincronización del navegador.

6
00:00:28,570 --> 00:00:31,065
En la segunda parte del ejercicio,

7
00:00:31,065 --> 00:00:40,010
haremos uso de Usman y de las diversas tareas para preparar el pliegue de distribución.

8
00:00:40,010 --> 00:00:44,170
Estos ejercicios no son de ninguna manera la única forma de

9
00:00:44,170 --> 00:00:49,720
implementar configuraciones de Grunt o archivos de llamada.

10
00:00:49,720 --> 00:00:54,575
Esto es sólo una ilustración de cómo podemos hacer uso de estas herramientas.

11
00:00:54,575 --> 00:00:58,375
Es posible que desee idear su propia forma de configurar

12
00:00:58,375 --> 00:01:03,320
su archivo Grunt y su archivo de llamada para sus proyectos.

13
00:01:03,320 --> 00:01:13,200
Nuestro primer paso en hacer uso de Grunt es configurar la CLI de Grunt como un módulo global de NPM.

14
00:01:13,200 --> 00:01:21,550
Para hacer eso, agregue el tipo de mensaje: NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Esta es la interfaz de línea de comandos para Grunt.

16
00:01:25,190 --> 00:01:27,480
Una vez que esto esté configurado,

17
00:01:27,480 --> 00:01:34,690
entonces vamos a configurar un módulo local de NPM de Grunt para su uso dentro de nuestros proyectos.

18
00:01:34,690 --> 00:01:38,370
El Grunt CLI nos permite hacer uso de Grunt.

19
00:01:38,370 --> 00:01:40,050
Hemos creado la CLI de Grunt.

20
00:01:40,050 --> 00:01:47,405
Luego, el siguiente paso es configurar- Grunt localmente,

21
00:01:47,405 --> 00:01:52,655
por lo que; NPM instala Grunt menos guardar dev.

22
00:01:52,655 --> 00:01:56,365
A continuación, instale el Grunt localmente.

23
00:01:56,365 --> 00:01:58,930
Una vez que haya completado estos dos pasos,

24
00:01:58,930 --> 00:02:04,850
el siguiente paso es ir a nuestro proyecto y luego crear un nuevo archivo,

25
00:02:04,850 --> 00:02:10,165
y lo nombraremos como Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
Dentro de este Gruntfile.js, vamos a configurar el código para configurar nuestras tareas de Grunt.

27
00:02:19,034 --> 00:02:27,770
En este archivo, el primer paso es agregar 'use strict' que significa,

28
00:02:27,770 --> 00:02:30,640
'use strict' código JavaScript.

29
00:02:30,640 --> 00:02:36,460
Luego dices module.exports

30
00:02:37,050 --> 00:02:42,830
= función (gruñido).

31
00:02:44,990 --> 00:02:53,005
Luego dentro de aquí, configuraremos la configuración de Grunt para todas las tareas.

32
00:02:53,005 --> 00:02:57,655
Como mencioné anteriormente, Grunt es un corredor de tareas basado en la configuración.

33
00:02:57,655 --> 00:03:02,200
Por lo tanto, instalaremos los diversos plug-ins de Grunt para

34
00:03:02,200 --> 00:03:08,370
las diversas tareas y luego los configuraremos en nuestro archivo Grunt.

35
00:03:08,370 --> 00:03:10,769
Para hacer la configuración,

36
00:03:10,769 --> 00:03:12,605
vamos a añadir el código aquí,

37
00:03:12,605 --> 00:03:19,290
diciendo: Grunt.InitConfig

38
00:03:19,410 --> 00:03:28,655
y dentro de este InitConfig,

39
00:03:28,655 --> 00:03:32,805
vamos a añadir en la configuración para las tareas de Grunt de la rueda.

40
00:03:32,805 --> 00:03:34,580
Una vez que hayas completado esto,

41
00:03:34,580 --> 00:03:37,145
guardemos los cambios.

42
00:03:37,145 --> 00:03:39,385
En nuestro próximo paso,

43
00:03:39,385 --> 00:03:47,610
vamos a configurar algunos plug-ins de Grunt para permitirnos convertir código SCSS en código CSS.

44
00:03:47,610 --> 00:03:54,240
Para hacer eso, instalaré un módulo NPM llamado

45
00:03:54,240 --> 00:04:01,875
Grunt SASS — Grunt SASS, guarde def.

46
00:04:01,875 --> 00:04:03,450
Además de esto,

47
00:04:03,450 --> 00:04:07,375
voy a configurar dos módulos más de Grunt llamados,

48
00:04:07,375 --> 00:04:18,610
NPM Install Time Grunt y Jit Grunt.

49
00:04:19,990 --> 00:04:23,430
Estos dos módulos — Tiempo Gruñido y Jit Gruñido.

50
00:04:23,430 --> 00:04:31,190
El módulo Time Grunt imprime las estadísticas de tiempo para ejecutar las diversas tareas de Grunt.

51
00:04:31,190 --> 00:04:35,150
El módulo Jit Grunt se utiliza para cargar en

52
00:04:35,150 --> 00:04:40,420
esos plug-ins Grunt siempre que se requieran dentro de cualquier aplicación.

53
00:04:40,420 --> 00:04:42,860
La otra alternativa es cargar

54
00:04:42,860 --> 00:04:49,475
los diferentes módulos Grunt explícitamente en su archivo de configuración de Grunt.

55
00:04:49,475 --> 00:04:53,085
Prefiero usar el Jit Grunt para que se encargue de cargar

56
00:04:53,085 --> 00:04:56,790
en cualquier plug-ins de Grunt que necesite según sea necesario,

57
00:04:56,790 --> 00:04:59,955
como cuando los uso en el código.

58
00:04:59,955 --> 00:05:04,785
Instale estos dos Time Grunt y Jit Grunt y una vez que estén instalados,

59
00:05:04,785 --> 00:05:11,845
entonces es hora de configurar nuestra tarea de conversión SASS.

60
00:05:11,845 --> 00:05:14,870
Ahora, obviamente, debe preguntarse por qué escribimos este

61
00:05:14,870 --> 00:05:18,250
module.exports y luego funcionamos y así sucesivamente.

62
00:05:18,250 --> 00:05:21,485
Así es como definimos los módulos de nodo.

63
00:05:21,485 --> 00:05:26,590
Vamos a tratar con la estructura de los módulos de nodo y por qué usamos este enfoque

64
00:05:26,590 --> 00:05:33,375
en el curso de módulos de nodo del lado del servidor más adelante en la especialización.

65
00:05:33,375 --> 00:05:38,415
Por el momento, solo acepte que así es como se escribe el código para Grunt,

66
00:05:38,415 --> 00:05:41,040
porque el archivo Grunt es en sí mismo

67
00:05:41,040 --> 00:05:47,110
un módulo de nodo que se va a cargar en varios plug-ins de Grunt.

68
00:05:47,110 --> 00:05:51,815
Después de hacer eso, vamos a requerir un par de plugins Grunt aquí.

69
00:05:51,815 --> 00:05:59,080
Para hacer eso, diremos require ('tiempo- gruño'),

70
00:05:59,080 --> 00:06:08,840
y diremos gruñido versus la configuración que usamos para cargar en el Tiempo Gruñido.

71
00:06:08,840 --> 00:06:12,555
Para requerir, como aprenderá más adelante cuando aprenda acerca de los módulos de nodo,

72
00:06:12,555 --> 00:06:16,660
es una forma de decir que la carga en el módulo de nodo de tiempo Grunt que

73
00:06:16,660 --> 00:06:20,815
se utilizará dentro de este módulo de nodo en particular.

74
00:06:20,815 --> 00:06:28,450
Del mismo modo, requeriré el módulo de nodo Jit Grunt.

75
00:06:32,190 --> 00:06:37,095
Este módulo de nodo de Jit Grunt se asegura de que se cargue en

76
00:06:37,095 --> 00:06:42,540
cualquier otro módulo de nodo o cualquier otro plug-ins de Grunt, que son módulos de nodo

77
00:06:42,540 --> 00:06:50,925
, básicamente, como cuando realmente están implícitos dentro de mi Grunt para hacer varias tareas.

78
00:06:50,925 --> 00:06:55,295
La alternativa sería cargar manualmente en todos y cada uno de

79
00:06:55,295 --> 00:07:00,600
esos plug-ins Grunt explícitamente mediante el uso de la instrucción requerida.

80
00:07:00,600 --> 00:07:04,445
Me estoy ahorrando un poco de problemas simplemente usando Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
que se encarga de cargar esos módulos de nodo cuando sea necesario.

82
00:07:07,825 --> 00:07:11,395
Ahora pasando a la configuración,

83
00:07:11,395 --> 00:07:16,159
como entendemos, Grunt trabaja en la configuración,

84
00:07:16,159 --> 00:07:21,935
por lo que cada plug-in de Grunt que queremos emplear para realizar una tarea,

85
00:07:21,935 --> 00:07:27,225
debe configurarse dentro de este archivo Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
Esta configuración básicamente es un objeto JavaScript básicamente.

87
00:07:32,965 --> 00:07:36,145
Si está familiarizado con los objetos JavaScript,

88
00:07:36,145 --> 00:07:40,275
comienza a entender la sintaxis muy, muy rápidamente.

89
00:07:40,275 --> 00:07:47,330
La primera tarea que voy a configurar es SASS.

90
00:07:47,330 --> 00:07:49,855
Entonces, escribo SASS aquí,

91
00:07:49,855 --> 00:07:55,200
y luego dentro de SASS, digo dist.

92
00:07:55,920 --> 00:08:01,570
Ahora tiene que creer que así es como se hace la configuración.

93
00:08:01,570 --> 00:08:03,280
Entonces, digo dist,

94
00:08:03,280 --> 00:08:05,295
y luego dentro,

95
00:08:05,295 --> 00:08:10,980
digo archivos, y luego allí,

96
00:08:10,980 --> 00:08:14,125
especifico los archivos que deben ser convertidos.

97
00:08:14,125 --> 00:08:20,270
Digo, CSS/styles.CSS, que

98
00:08:20,270 --> 00:08:28,815
depende de CSS/Styles.scss.

99
00:08:28,815 --> 00:08:36,925
Con esto, completamos la configuración de la tarea SASS aquí.

100
00:08:36,925 --> 00:08:40,620
Una vez que completemos la configuración de la tarea SASS,

101
00:08:40,620 --> 00:08:43,485
si realmente desea ejecutar la tarea SASS,

102
00:08:43,485 --> 00:08:52,950
entonces abajo configuraría la tarea SASS diciendo «Grunt.RegisterTask»,

103
00:08:54,770 --> 00:08:58,545
y luego llamaré a esta tarea CSS,

104
00:08:58,545 --> 00:09:00,280
y luego,

105
00:09:00,280 --> 00:09:04,935
entre corchetes, diré «SASS».

106
00:09:04,935 --> 00:09:07,605
Ahora, para entender la sintaxis aquí,

107
00:09:07,605 --> 00:09:13,715
esto como puede ver dice «Grunt.RegisterTask» y el nombre de esta tarea es CSS.

108
00:09:13,715 --> 00:09:15,340
¿ Y qué implica esta tarea?

109
00:09:15,340 --> 00:09:21,685
Esta tarea implica ejecutar la tarea SASS que ya se ha configurado aquí.

110
00:09:21,685 --> 00:09:25,080
Así es como leemos esta sintaxis aquí.

111
00:09:25,080 --> 00:09:27,950
Si no lo desea, no necesita configurarlo,

112
00:09:27,950 --> 00:09:33,065
ya que emplearemos SASS junto con la tarea de vigilancia para

113
00:09:33,065 --> 00:09:38,460
ejecutar automáticamente el SASS cuando cambie nuestro archivo SCSS.

114
00:09:38,460 --> 00:09:40,840
Con esto, guardemos los cambios.

115
00:09:40,840 --> 00:09:45,570
Permítanme mostrarles esta tarea particular en acción.

116
00:09:45,570 --> 00:09:48,990
Si configura la tarea con el nombre CSS allí,

117
00:09:48,990 --> 00:09:50,650
luego agrega el mensaje,

118
00:09:50,650 --> 00:09:54,655
puede escribir «grunt.CSS» y luego ejecutará

119
00:09:54,655 --> 00:10:00,090
la tarea de convertir el código sass en código CSS.

120
00:10:00,090 --> 00:10:04,005
Ir al símbolo del sistema, en el símbolo del sistema,

121
00:10:04,005 --> 00:10:09,070
escriba «grunt.CSS» y verá

122
00:10:09,070 --> 00:10:17,530
la tarea SASS ejecutándose y luego convirtiendo el archivo styles.sess a styles.CSS.

123
00:10:17,530 --> 00:10:19,390
Además, como puede ver,

124
00:10:19,390 --> 00:10:23,340
el Time Grunt imprimirá estadísticas como esta

125
00:10:23,340 --> 00:10:27,800
para indicar cuánto tiempo tomó cada una de esas tareas.

126
00:10:27,800 --> 00:10:29,520
Si eso es de interés para usted,

127
00:10:29,520 --> 00:10:32,880
entonces puede ver estos detalles aquí.

128
00:10:32,890 --> 00:10:39,360
En nuestro siguiente paso, vamos a configurar el reloj y el servidor,

129
00:10:39,360 --> 00:10:41,800
para mantener una vigilancia en

130
00:10:41,800 --> 00:10:45,960
los archivos SASS y convertirlos automáticamente cuando se cambien,

131
00:10:45,960 --> 00:10:48,625
y luego configuraremos el servidor,

132
00:10:48,625 --> 00:10:54,045
usando BrowserSync para servir nuestro sitio web.

133
00:10:54,045 --> 00:10:56,700
Para configurar las tareas de Watch and Serve,

134
00:10:56,700 --> 00:10:59,740
voy a instalar un par de plug-ins gruñidos más,

135
00:10:59,740 --> 00:11:03,990
así que diré npm install,

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch menos save-dev.

137
00:11:12,465 --> 00:11:15,480
Así que este es el reloj gruñido.

138
00:11:15,480 --> 00:11:21,450
Grunt plug-in que es un módulo de nodo, así que instale eso.

139
00:11:21,670 --> 00:11:32,030
Por lo tanto, el complemento Watch le permite vigilar sus diversos archivos.

140
00:11:32,030 --> 00:11:33,550
El próximo complemento que voy

141
00:11:33,550 --> 00:11:43,750
a instalar es grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
El módulo BrowserSync es el que voy a utilizar,

143
00:11:50,515 --> 00:11:54,230
para guardar los archivos de mi carpeta de proyecto, de

144
00:11:54,230 --> 00:12:00,090
modo que pueda ver el sitio web en un navegador.

145
00:12:00,090 --> 00:12:04,845
Una vez que he instalado esos dos módulos,

146
00:12:04,845 --> 00:12:08,295
es hora de entrar en mi grunt.initconfig

147
00:12:08,295 --> 00:12:11,635
y luego configurar las dos tareas.

148
00:12:11,635 --> 00:12:13,300
Uno para vigilar,

149
00:12:13,300 --> 00:12:18,125
el segundo para servir los archivos usando BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Entonces, volviendo a mi initconfig,

151
00:12:20,680 --> 00:12:23,710
ponga una coma allí después del SASS,

152
00:12:23,710 --> 00:12:26,460
y luego muévase a la siguiente línea.

153
00:12:27,050 --> 00:12:32,650
Recuerda siempre poner esta coma ahí.

154
00:12:32,650 --> 00:12:40,990
Una coma que falta provoca un montón de dolor de cabeza cuando intentas ejecutar tus tareas gruñidas.

155
00:12:40,990 --> 00:12:44,635
Es muy difícil identificar que te has perdido una coma.

156
00:12:44,635 --> 00:12:46,950
Por lo tanto, es importante prestar atención a

157
00:12:46,950 --> 00:12:52,290
la sintaxis y asegurarse de que no se pierda ninguna de esas comas.

158
00:12:52,290 --> 00:12:55,425
Volverá a morderte en el momento equivocado.

159
00:12:55,425 --> 00:12:57,105
Así que la siguiente tarea,

160
00:12:57,105 --> 00:13:00,190
que voy a configurar es WatchTask.

161
00:13:00,190 --> 00:13:03,605
Así que digo «Watch», ¿y qué quiero ver?

162
00:13:03,605 --> 00:13:10,070
Quiero ver estos archivos, que es CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Así que este es el archivo SCSS que quiero ver.

164
00:13:17,680 --> 00:13:22,445
Todos los archivos SCSS en mi carpeta CSS.

165
00:13:22,445 --> 00:13:26,670
Si alguno de ellos se modifica,

166
00:13:26,670 --> 00:13:32,865
entonces la tarea correspondiente que voy a ejecutar es, SASS.

167
00:13:32,865 --> 00:13:36,180
La tarea SASS que ya configuré anteriormente.

168
00:13:36,180 --> 00:13:39,710
Entonces, con esto, configuré mi WatchTask,

169
00:13:39,710 --> 00:13:42,820
para vigilar los archivos SCSS y luego

170
00:13:42,820 --> 00:13:46,075
convertirlos automáticamente invocando el SASS.

171
00:13:46,075 --> 00:13:50,475
Ahora, con WatchTask, en realidad puedo vigilar varios archivos,

172
00:13:50,475 --> 00:13:55,650
y luego invocar automáticamente las tareas correspondientes para esos archivos.

173
00:13:55,650 --> 00:13:57,895
Entonces, por ejemplo, puedo vigilar

174
00:13:57,895 --> 00:14:01,660
mis archivos JavaScript y luego hacer sugerencias JS automáticamente,

175
00:14:01,660 --> 00:14:04,465
cuando mis archivos cambian.

176
00:14:04,465 --> 00:14:07,770
O para hacer identificación y así sucesivamente.

177
00:14:07,770 --> 00:14:12,100
Ahora, el siguiente que voy a configurar es BrowserSync.

178
00:14:12,100 --> 00:14:15,345
De nuevo, no olvide la coma después de WatchTask

179
00:14:15,345 --> 00:14:19,070
y, a continuación, escriba BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Diría que BrowserSync aquí y luego para BrowserSync,

181
00:14:26,369 --> 00:14:30,570
diría que configure una tarea dentro.

182
00:14:30,570 --> 00:14:35,090
Ahora, esta es la sintaxis que usamos para poner

183
00:14:35,090 --> 00:14:40,410
la configuración dentro de nuestro archivo gruñido.

184
00:14:40,410 --> 00:14:42,840
Así que dice BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Ahora, si me preguntas por qué,

186
00:14:44,940 --> 00:14:46,895
solo necesitamos leer la documentación,

187
00:14:46,895 --> 00:14:52,275
para cada uno de esos plug-ins y luego averiguar cómo configurar esos plug-ins.

188
00:14:52,275 --> 00:14:56,000
Por lo tanto, ya he leído la documentación y he descubierto

189
00:14:56,000 --> 00:15:00,885
alguna configuración básica para cada una de estas tareas, así que es por eso que solo las estoy escribiendo.

190
00:15:00,885 --> 00:15:03,525
Obviamente, si desea más flexibilidad,

191
00:15:03,525 --> 00:15:07,350
puede que desee leer la documentación correspondiente y luego averiguar

192
00:15:07,350 --> 00:15:11,655
otras formas de configurar estas tareas.

193
00:15:11,655 --> 00:15:18,010
Mi configuración aquí es solo una forma de abordar o resolver los problemas.

194
00:15:18,010 --> 00:15:22,850
Así que aquí especifico los BSFiles, por

195
00:15:22,850 --> 00:15:28,685
lo que este archivo especifica qué archivos deben ser observados

196
00:15:28,685 --> 00:15:36,715
por mi BrowserSync y luego cuando cualquiera de estos archivos cambie,

197
00:15:36,715 --> 00:15:44,805
entonces mi BrowserSync hará que el navegador se vuelva a cargar.

198
00:15:44,805 --> 00:15:50,185
Así que voy a ver todos los archivos en mi carpeta CSS,

199
00:15:50,185 --> 00:15:53,220
archivos HTML en mi carpeta de proyecto,

200
00:15:53,220 --> 00:15:57,945
y luego todos mis archivos JavaScript en la carpeta JS.

201
00:15:57,945 --> 00:16:03,835
Por lo tanto, con esto he configurado todos aquellos archivos en los que voy a vigilar,

202
00:16:03,835 --> 00:16:10,335
y luego automáticamente causar una recarga de mi página cuando sea necesario.

203
00:16:10,335 --> 00:16:14,180
Y luego, la siguiente configuración que necesito

204
00:16:14,180 --> 00:16:19,100
hacer es algunas opciones más, para mi BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Entonces, las opciones que voy a especificar son,

206
00:16:23,510 --> 00:16:29,190
watchTask true, lo que significa que hay un WatchTask en ejecución,

207
00:16:29,190 --> 00:16:33,130
y el directorio base para mi servidor.

208
00:16:33,130 --> 00:16:35,605
Así que digo BaseDir,

209
00:16:35,605 --> 00:16:41,960
y luego especifico, barra de puntos.

210
00:16:41,960 --> 00:16:43,720
Entonces, el directorio actual,

211
00:16:43,720 --> 00:16:45,880
como mi directorio base.

212
00:16:45,880 --> 00:16:47,740
Entonces, con estos cambios,

213
00:16:47,740 --> 00:16:51,815
permítanme guardar los cambios en mi archivo gruñido,

214
00:16:51,815 --> 00:17:01,085
y luego iré abajo y luego configuraré otra tarea gruñida, aquí llamada predeterminada.

215
00:17:01,085 --> 00:17:05,145
Por lo tanto, especificaría la tarea como predeterminada.

216
00:17:05,145 --> 00:17:08,720
Para esta tarea predeterminada, ¿qué debo hacer?

217
00:17:08,720 --> 00:17:12,060
Necesito ejecutar

218
00:17:12,160 --> 00:17:20,055
BrowserSync y también la segunda tarea que voy a hacer es ver.

219
00:17:20,055 --> 00:17:24,590
Tendré que hacer la tarea BrowserSync primero y luego WatchTask más tarde.

220
00:17:24,590 --> 00:17:27,310
Porque la tarea BrowserSync comenzará a servir mi servidor.

221
00:17:27,310 --> 00:17:30,605
Si hago la tarea WatchTask primero y la tarea BrowserSync más tarde,

222
00:17:30,605 --> 00:17:32,495
WatchTask básicamente,

223
00:17:32,495 --> 00:17:38,260
detendrá todo y luego todas las tareas restantes detrás de eso no se ejecutarán.

224
00:17:38,260 --> 00:17:40,525
Por lo tanto, si está utilizando WatchTask,

225
00:17:40,525 --> 00:17:45,624
hágalo como último en la secuencia que especifique en estos corchetes.

226
00:17:45,624 --> 00:17:50,415
Con esto, mi proyecto ahora está configurado,

227
00:17:50,415 --> 00:17:57,100
para vigilar mis archivos SASS y servirlo siempre que sea necesario.

228
00:17:57,100 --> 00:17:59,670
Así que, esto completa mi expediente de gruñidos,

229
00:17:59,670 --> 00:18:02,795
volvamos a nuestra terminal.

230
00:18:02,795 --> 00:18:04,740
Volviendo a mi terminal,

231
00:18:04,740 --> 00:18:07,670
he abierto otra pestaña y luego en esta pestaña,

232
00:18:07,670 --> 00:18:11,335
voy a ejecutar la tarea gruñido,

233
00:18:11,335 --> 00:18:17,010
que también mantendrá mi BrowserSync en ejecución y servirá

234
00:18:17,010 --> 00:18:22,965
archivos y volverá a cargar automáticamente la página web,

235
00:18:22,965 --> 00:18:25,055
si alguno de esos archivos cambia.

236
00:18:25,055 --> 00:18:30,790
Entonces, si configura una tarea como tarea predeterminada como lo hicimos en el ejercicio,

237
00:18:30,790 --> 00:18:32,125
entonces en el símbolo del sistema,

238
00:18:32,125 --> 00:18:37,725
solo necesito escribir gruñido y luego ejecutará automáticamente la tarea predeterminada.

239
00:18:37,725 --> 00:18:40,680
Una vez que mis tareas gruñidas comienzan a ejecutarse,

240
00:18:40,680 --> 00:18:44,015
puede ver que ha iniciado BrowserSync y está sirviendo

241
00:18:44,015 --> 00:18:48,600
los archivos y también está ejecutando WatchTask,

242
00:18:48,600 --> 00:18:54,825
que está esperando que cualquier cambio ejecute automáticamente la tarea SCSS.

243
00:18:54,825 --> 00:19:01,460
Para demostrarle cómo se activará la tarea SCSS,

244
00:19:01,460 --> 00:19:05,120
cada vez que hago cambios en mi archivo Styles.scss,

245
00:19:05,120 --> 00:19:07,725
así que traje el archivo Styles.scss,

246
00:19:07,725 --> 00:19:11,845
y simplemente voy a guardar este archivo.

247
00:19:11,845 --> 00:19:14,175
Y luego notará que inmediatamente,

248
00:19:14,175 --> 00:19:22,285
en el lado izquierdo, se invoca la tarea SASS y se ejecuta y luego se vuelve a compilar y esto

249
00:19:22,285 --> 00:19:30,705
también hará que el archivo Styles.scss se cambie, después de ser recompilado.

250
00:19:30,705 --> 00:19:38,045
Entonces esto activará BrowserSync para volver a cargar automáticamente mi página web.

251
00:19:38,045 --> 00:19:43,750
Con esto, completamos nuestro ejercicio de gruñido primera parte.

252
00:19:43,750 --> 00:19:48,659
Este es un buen momento para guardar sus archivos, en

253
00:19:48,659 --> 00:19:54,960
el repositorio de Git con el mensaje Grunt parte uno.