1
00:00:03,060 --> 00:00:06,095
Ahora que hemos concedido suficiente,

2
00:00:06,095 --> 00:00:08,700
es hora de Gulp.

3
00:00:08,700 --> 00:00:12,010
Intentaremos realizar el mismo tipo de

4
00:00:12,010 --> 00:00:16,235
tareas que hemos realizado con Scripts NPM y Grunt,

5
00:00:16,235 --> 00:00:22,995
pero ahora intentaremos hacer lo mismo usando Gulp y Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
Para empezar, primero instalemos Gulp como un módulo global.

7
00:00:29,090 --> 00:00:31,635
Entonces, para hacer eso, en el símbolo del sistema,

8
00:00:31,635 --> 00:00:37,970
escriba npm -g install gulp,

9
00:00:38,740 --> 00:00:42,380
esto instalará Gulp como un módulo global y

10
00:00:42,380 --> 00:00:45,625
lo hará disponible para su uso en la línea de comandos.

11
00:00:45,625 --> 00:00:47,605
Después de completar esto,

12
00:00:47,605 --> 00:00:51,425
el siguiente paso es instalar Gulp localmente en nuestro proyecto.

13
00:00:51,425 --> 00:00:53,975
Entonces, para hacer eso, en el símbolo del sistema,

14
00:00:53,975 --> 00:01:01,700
escriba npm install gulp —save-dev.

15
00:01:01,700 --> 00:01:03,835
Una vez que hayamos completado estos dos,

16
00:01:03,835 --> 00:01:10,765
es hora de seguir adelante y configurar nuestras tareas de Gulp.

17
00:01:10,765 --> 00:01:14,195
Antes de hacer eso, nuestro siguiente paso,

18
00:01:14,195 --> 00:01:18,170
instalaremos el plug-in Gulp Sass para que podamos

19
00:01:18,170 --> 00:01:23,560
configurar el Sass para que vea como tarea de conversión en nuestro archivo Gulp.

20
00:01:23,560 --> 00:01:26,460
Entonces, para seguir adelante y hacer eso,

21
00:01:26,460 --> 00:01:30,580
escriba npm install

22
00:01:31,420 --> 00:01:39,100
gulp sass —save-dev.

23
00:01:40,270 --> 00:01:43,835
También mientras estamos en ello,

24
00:01:43,835 --> 00:01:48,305
también podríamos instalar la tarea Browser Sync Gulp Task,

25
00:01:48,305 --> 00:01:53,835
para que podamos configurar ambos uno tras otro.

26
00:01:53,835 --> 00:02:07,960
Por lo tanto, instalaré, npm install browser-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
Una vez que estos dos están instalados,

28
00:02:11,480 --> 00:02:17,980
vamos a seguir adelante y crear nuestro archivo Gulp y luego configurar nuestras tareas Gulp aquí.

29
00:02:17,980 --> 00:02:20,590
Vamos a nuestra carpeta de proyecto,

30
00:02:20,590 --> 00:02:27,905
vamos a crear un nuevo archivo y luego el nombre gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
y en este archivo, vamos a configurar nuestras Tareas Gulp.

32
00:02:32,380 --> 00:02:34,950
Entonces, una vez que gulpfile.js esté listo,

33
00:02:34,950 --> 00:02:39,940
configure bien las tareas de Gulp aquí primero comenzando

34
00:02:39,940 --> 00:02:50,310
con 'use strict' y luego var gulp.

35
00:02:50,310 --> 00:02:57,585
Por lo tanto, necesitamos requerir los módulos de nodo gulp,

36
00:02:57,585 --> 00:02:59,810
y también mientras estamos en ello,

37
00:02:59,810 --> 00:03:07,600
necesitaremos el módulo de nodo sass.

38
00:03:12,470 --> 00:03:16,310
Como mencioné en el ejercicio anterior,

39
00:03:16,310 --> 00:03:22,110
será más claro para usted por qué el código está escrito así,

40
00:03:22,110 --> 00:03:30,245
una vez que entienda más acerca de los módulos de nodo en un curso posterior.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, así que lo que hemos hecho es incluir los

42
00:03:35,535 --> 00:03:40,895
módulos de nodo Gulp Contrast y BowserSync en nuestro archivo Gulp.

43
00:03:40,895 --> 00:03:42,545
Y una vez que lo hayas hecho,

44
00:03:42,545 --> 00:03:45,360
es hora de configurar nuestras Tareas Gulp.

45
00:03:45,360 --> 00:03:47,940
Como aprendimos anteriormente,

46
00:03:47,940 --> 00:03:52,340
Gulp es un código basado en la forma de configurar

47
00:03:52,340 --> 00:03:57,815
tareas a diferencia de Grunt que se basa más en la configuración de las tareas.

48
00:03:57,815 --> 00:04:00,455
Entonces, en el caso de Gulp,

49
00:04:00,455 --> 00:04:04,230
el bebé configurará nuestras tareas para escribir

50
00:04:04,230 --> 00:04:11,340
gulp.task y luego vamos a configurar un nombre de tarea 'sass',

51
00:04:11,340 --> 00:04:13,545
y luego para esta tarea,

52
00:04:13,545 --> 00:04:17,630
vamos a configurar esto como una función,

53
00:04:19,990 --> 00:04:23,205
y así es como se prepara el código.

54
00:04:23,205 --> 00:04:28,850
Por lo tanto, la función Gulp Tasks Sass y aquí,

55
00:04:28,850 --> 00:04:32,310
estamos configurando las tareas de Gulp,

56
00:04:34,850 --> 00:04:45,030
así que escribiremos return gulp.src ('. /css/ *.scss') Como aprendimos,

57
00:04:45,030 --> 00:05:00,800
Gulp es un código basado en herramientas sobre la configuración.

58
00:05:00,800 --> 00:05:06,630
Por lo tanto, prepararemos esta tarea como tal.

59
00:05:06,630 --> 00:05:14,390
Por lo tanto, verá que hemos especificado Gulp fuente pipe sass en,

60
00:05:14,390 --> 00:05:18,630
y luego aquí, error.

61
00:05:19,220 --> 00:05:22,600
Por lo tanto, si ocurre un error,

62
00:05:24,020 --> 00:05:31,870
usaremos la forma Sass para registrar el error y luego canalizarlo

63
00:05:31,870 --> 00:05:43,480
a través de gulp.dest ('. /css '), y que

64
00:05:52,970 --> 00:05:59,270
completa la configuración de las tareas de Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Debes estar preguntándote por qué escribimos el código así.

66
00:06:03,540 --> 00:06:06,960
Dice fuente de trago y luego especifica algo allí,

67
00:06:06,960 --> 00:06:10,650
y luego el siguiente dice tubería y luego el siguiente dice tubería.

68
00:06:10,650 --> 00:06:16,045
Vamos a entender la forma de Gulp de hacer las cosas con un poco más de detalle.

69
00:06:16,045 --> 00:06:19,855
Para ayudar a explicar por qué configuramos Tareas como esa,

70
00:06:19,855 --> 00:06:24,730
tengo una explicación de lo que llamamos Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
La forma en que funciona Gulp es como tomar un conjunto de archivos y especificar el conjunto de

72
00:06:29,900 --> 00:06:35,405
archivos diciendo fuente de gulp como hicimos con las tareas de Sass allí.

73
00:06:35,405 --> 00:06:39,005
Así que aquí, esta es la función que toma los archivos.

74
00:06:39,005 --> 00:06:44,405
Incluso podría especificar los archivos usando los patrones de globbing que aprendimos en Grunt,

75
00:06:44,405 --> 00:06:49,410
y luego crea un flujo de objetos que representa estos archivos.

76
00:06:49,410 --> 00:06:51,560
Ahora, una vez que se crea la secuencia,

77
00:06:51,560 --> 00:06:54,480
entonces la secuencia se puede canalizar a través de un conjunto de

78
00:06:54,480 --> 00:06:58,795
funciones una tras otra para transformar estos archivos.

79
00:06:58,795 --> 00:07:07,400
Y luego, finalmente, los archivos transformados resultantes se pueden poner en una ubicación de destino.

80
00:07:07,400 --> 00:07:09,795
Entonces es por eso que especificamos la fuente Gulp,

81
00:07:09,795 --> 00:07:11,585
luego especificamos la tubería.

82
00:07:11,585 --> 00:07:15,945
Entonces, la tubería permite que la corriente se canalice a través de una función,

83
00:07:15,945 --> 00:07:18,295
y así, es por eso que dijimos tubería de punto,

84
00:07:18,295 --> 00:07:20,600
y luego dijimos trago.

85
00:07:20,600 --> 00:07:23,965
Y luego dijimos sass por error.

86
00:07:23,965 --> 00:07:30,255
Y luego el siguiente dice Pipe Gulp Dest.

87
00:07:30,255 --> 00:07:35,950
Por lo tanto, el dest gulp especifica el destino de los archivos que se han procesado.

88
00:07:35,950 --> 00:07:43,860
Entonces, así es como se especifica una tarea típica en gulp porque pero gulp opera en flujos.

89
00:07:43,860 --> 00:07:48,875
Por lo tanto, sus archivos de flujo a través de las tuberías hasta que

90
00:07:48,875 --> 00:07:54,805
se transfieran y luego se depositarán en el destino especificado.

91
00:07:54,805 --> 00:07:59,610
Por lo tanto, verá una estructura similar para muchas de las tareas de trago que

92
00:07:59,610 --> 00:08:04,740
configuraríamos en este ejercicio y en el siguiente ejercicio.

93
00:08:04,740 --> 00:08:11,460
Ahora que ha entendido un poco sobre cómo funciona gulp con flujos y cómo

94
00:08:11,460 --> 00:08:21,005
la tarea gulp usa la tubería para procesar archivos a través de un conjunto de funciones,

95
00:08:21,005 --> 00:08:28,290
y le queda más claro por qué configuramos esta tarea sass como se ve en este código aquí.

96
00:08:28,290 --> 00:08:33,260
La siguiente tarea que vamos a configurar se llama gulp,

97
00:08:33,340 --> 00:08:39,900
y vamos a configurar esta tarea como sass watch.

98
00:08:39,900 --> 00:08:42,700
Por lo tanto, esta es una tarea de vigilancia que vamos a configurar,

99
00:08:42,700 --> 00:08:48,920
y luego usted especificaría la función.

100
00:08:49,190 --> 00:08:51,330
Y así, aquí,

101
00:08:51,330 --> 00:08:53,320
la tarea de ver el trago sass,

102
00:08:53,320 --> 00:08:58,490
lo que hacemos es especificar los archivos que vamos a estar viendo.

103
00:08:58,490 --> 00:09:05,600
Por lo tanto, usamos la tarea de seguimiento de trago para ver el archivo.

104
00:09:05,600 --> 00:09:08,830
Por lo tanto, el reloj ya está integrado en trago.

105
00:09:08,830 --> 00:09:17,660
Por lo tanto, tomará trago de reloj y luego especificamos los archivos allí*.SCSS.

106
00:09:17,660 --> 00:09:21,390
Por lo tanto, como puede ver, el reloj de trago observará

107
00:09:21,390 --> 00:09:25,915
estos archivos y luego, cuando se produzcan cambios en estos archivos,

108
00:09:25,915 --> 00:09:30,225
ejecutará esa tarea sass,

109
00:09:30,225 --> 00:09:32,975
que hemos especificado anteriormente.

110
00:09:32,975 --> 00:09:37,360
Por lo tanto, así es como se configura esa tarea de reloj sass.

111
00:09:37,360 --> 00:09:39,495
Ahora que hemos hecho estos dos,

112
00:09:39,495 --> 00:09:42,730
vamos a configurar esa tarea de sincronización del navegador a continuación.

113
00:09:42,730 --> 00:09:47,650
Por lo tanto, cierre eso con el punto y coma y luego la

114
00:09:47,650 --> 00:09:53,375
siguiente tarea que configuraremos es la tarea de sincronización del navegador.

115
00:09:53,375 --> 00:10:01,735
Por lo tanto, especificaré la tarea de sincronización del navegador allí.

116
00:10:01,735 --> 00:10:04,550
Y luego para la tarea de sincronización del navegador,

117
00:10:04,550 --> 00:10:07,480
especificaré esa función.

118
00:10:07,480 --> 00:10:11,725
Nuevamente, tenga en cuenta la estructura en la que escribimos el código, la

119
00:10:11,725 --> 00:10:16,405
tarea de trago y luego especifique algo que siguió pero con una función.

120
00:10:16,405 --> 00:10:17,990
Ahora de nuevo, como dije,

121
00:10:17,990 --> 00:10:23,155
aprendemos módulos de nodo en el último curso de esta especialización,

122
00:10:23,155 --> 00:10:28,520
será más claro para usted por qué no los módulos escritos con esta estructura,

123
00:10:28,520 --> 00:10:31,790
y por qué las funciones están escritas así.

124
00:10:31,790 --> 00:10:34,470
Por lo tanto, decimos trago sincronización del navegador de tareas.

125
00:10:34,470 --> 00:10:38,260
Aquí, voy a definir una variable,

126
00:10:38,260 --> 00:10:40,920
una variable de JavaScript llamada archivos,

127
00:10:40,920 --> 00:10:45,050
que no es más que en matriz,

128
00:10:45,160 --> 00:10:55,935
y que dentro de esa matriz de archivos especificaría todos los archivos que

129
00:10:55,935 --> 00:10:58,790
si se modificara la sincronización del navegador necesita

130
00:10:58,790 --> 00:11:07,125
para causar la recarga o el archivo.

131
00:11:07,125 --> 00:11:12,690
Por lo tanto, los archivos html, los archivos CSS en la carpeta CSS,

132
00:11:12,690 --> 00:11:18,420
y luego de manera similar también voy a ver los archivos de imagen,

133
00:11:26,080 --> 00:11:31,960
y los archivos JavaScript.

134
00:11:33,840 --> 00:11:36,730
Todos estos archivos si alguno de ellos cambia.

135
00:11:36,730 --> 00:11:40,800
Entonces, después de esto, configuraré la sincronización del navegador aquí.

136
00:11:40,800 --> 00:11:44,315
Por lo tanto, voy a decir sincronización del navegador.

137
00:11:44,315 --> 00:11:49,010
Ya hemos definido esta variable llamada sincronización del navegador anteriormente.

138
00:11:49,010 --> 00:11:54,400
Por lo tanto, tenemos que inicializar la sincronización del navegador

139
00:11:56,230 --> 00:12:01,805
, y así, el primer parámetro para

140
00:12:01,805 --> 00:12:08,895
eso son los archivos que necesitarán ser observados,

141
00:12:08,895 --> 00:12:18,160
y luego el segundo parámetro especifica las opciones que estamos dando al navegador.

142
00:12:18,160 --> 00:12:21,720
Por lo tanto, la opción que estoy especificando es para el servidor.

143
00:12:21,720 --> 00:12:31,350
Especificaré el directorio base como el directorio actual,

144
00:12:31,350 --> 00:12:38,595
y luego eso completa la especificación de la tarea de sincronización del navegador.

145
00:12:38,595 --> 00:12:43,280
Por lo tanto, con esto, hemos completado la especificación de la tarea de sincronización del navegador aquí.

146
00:12:43,280 --> 00:12:46,750
Por lo tanto, se puede ver que cómo configuramos la tarea de sincronización del navegador,

147
00:12:46,750 --> 00:12:48,480
especificamos los archivos y luego guardar la

148
00:12:48,480 --> 00:12:51,750
sincronización del navegador en él y proporcionar los archivos como el primer parámetro.

149
00:12:51,750 --> 00:12:58,940
El segundo parámetro son las opciones para el complemento de sincronización del navegador.

150
00:12:58,940 --> 00:13:02,620
Luego, finalmente,

151
00:13:02,620 --> 00:13:10,680
programaremos o configuraremos la tarea llamada predeterminada.

152
00:13:10,680 --> 00:13:17,005
Al igual que yo tengo la tarea predeterminada en Grunt,

153
00:13:17,005 --> 00:13:23,475
también podemos tener una tarea predeterminada similar definida para gulp.

154
00:13:23,475 --> 00:13:28,095
Entonces, aquí decimos trago tarea sincronización predeterminada del navegador,

155
00:13:28,095 --> 00:13:33,275
y luego especificar la función.

156
00:13:33,275 --> 00:13:42,085
Y dentro de allí especificaremos el comienzo del trago.

157
00:13:42,085 --> 00:13:46,185
Por lo tanto, esto especifica que debería comenzar

158
00:13:46,185 --> 00:13:54,730
esta otra tarea que sass reloj tarea.La tarea de reloj sass tiene que ser iniciado.

159
00:13:54,840 --> 00:14:00,370
Asegúrese de que la tarea de sincronización del navegador se está ejecutando antes de que se inicie la tarea de observación sass.

160
00:14:00,370 --> 00:14:04,060
Por lo tanto, esta es la sintaxis para especificar eso en trago.

161
00:14:04,060 --> 00:14:08,095
Por lo tanto, con esto, hemos configurado todo lo que necesitamos en el archivo gulp.

162
00:14:08,095 --> 00:14:09,870
Así que, volviendo atrás,

163
00:14:09,870 --> 00:14:11,675
hay pasos que hicimos.

164
00:14:11,675 --> 00:14:17,460
Primero usamos require incluir todos sus plugins gulp allí,

165
00:14:17,460 --> 00:14:22,575
luego configuramos la tarea sass,

166
00:14:22,575 --> 00:14:25,455
y luego especificamos la tarea sass watch.

167
00:14:25,455 --> 00:14:31,995
Aquí es donde usamos el reloj trago que está disponible para nosotros como de trago.

168
00:14:31,995 --> 00:14:37,290
Luego especificamos la tarea de sincronización del navegador y luego finalmente

169
00:14:37,290 --> 00:14:43,150
reprogramamos la tarea predeterminada con el navegador Sync y el trago comienza con sass watch.

170
00:14:43,150 --> 00:14:45,705
Ahora, veamos los cambios,

171
00:14:45,705 --> 00:14:49,875
y luego seguiremos adelante y ejecutaremos el archivo gulp add,

172
00:14:49,875 --> 00:14:52,255
y el indicador de tipo gulp.

173
00:14:52,255 --> 00:14:59,780
Verá que gulp se inicia con la sincronización del navegador y la tarea de reloj sass se inicia,

174
00:14:59,780 --> 00:15:06,565
y luego la sincronización del navegador comenzará a servir los archivos.

175
00:15:06,565 --> 00:15:12,770
Si ve su sitio web utilizando un navegador,

176
00:15:12,770 --> 00:15:17,425
podrá ver el sitio web que se está sirviendo en el navegador.

177
00:15:17,425 --> 00:15:23,090
Permítaseme también ilustrar el funcionamiento de la tarea de vigilancia.

178
00:15:23,090 --> 00:15:26,795
Entonces, levantaré el style.css y

179
00:15:26,795 --> 00:15:31,185
solo intentaré guardar el cambio y notarás que en el lado izquierdo,

180
00:15:31,185 --> 00:15:36,850
la tarea sass se invoca inmediatamente y

181
00:15:36,850 --> 00:15:44,460
volverá a compilar el archivo style.scss en los archivos CSS.

182
00:15:44,460 --> 00:15:48,840
Y entonces ese navegador se recargará en este punto.

183
00:15:48,840 --> 00:15:54,085
Con esto completamos la primera parte del ejercicio trago.

184
00:15:54,085 --> 00:15:58,710
En la segunda parte, prepararemos la carpeta de distribución.

185
00:15:58,710 --> 00:16:05,030
Este es un buen momento para que hagas un git-commit con el mensaje Gulp parte 1.