1
00:00:03,510 --> 00:00:07,990
Ahora que tenemos una comprensión de

2
00:00:07,990 --> 00:00:12,965
los diversos pasos involucrados en la construcción e implementación de nuestro sitio web,

3
00:00:12,965 --> 00:00:18,690
y también una breve introducción a los scripts de NPM en la conferencia anterior,

4
00:00:18,690 --> 00:00:22,830
vamos a profundizar en el desarrollo de

5
00:00:22,830 --> 00:00:28,755
scripts NPM para automatizar muchas de las tareas de las que habíamos hablado anteriormente.

6
00:00:28,755 --> 00:00:31,350
Como vio en la conferencia anterior,

7
00:00:31,350 --> 00:00:38,760
ya tenemos un par de scripts NPM que habíamos incluido en nuestro archivo package.json,

8
00:00:38,760 --> 00:00:41,735
uno para iniciar el servidor lite y el segundo

9
00:00:41,735 --> 00:00:46,240
para convertir el código SCSS en CSS.

10
00:00:46,240 --> 00:00:49,755
En este ejercicio y el siguiente,

11
00:00:49,755 --> 00:00:53,055
exploraremos los scripts de NPM con un poco más de detalle.

12
00:00:53,055 --> 00:01:00,810
Para comenzar, primero hagamos algo de limpieza en el archivo index.html.

13
00:01:00,810 --> 00:01:03,095
Al ir al archivo index.html,

14
00:01:03,095 --> 00:01:09,325
vemos que tenemos este código JavaScript en la parte inferior de este archivo index.html.

15
00:01:09,325 --> 00:01:12,930
Preferiría mantener este código JavaScript en

16
00:01:12,930 --> 00:01:19,385
un archivo separado que contiene todos nuestros scripts,

17
00:01:19,385 --> 00:01:23,015
y luego incluir ese archivo en mi index.html.

18
00:01:23,015 --> 00:01:31,155
Para hacer eso, vamos a crear otra carpeta aquí con el nombre js.

19
00:01:31,155 --> 00:01:34,210
Y en esta carpeta js,

20
00:01:34,210 --> 00:01:41,520
voy a crear un nuevo archivo con el nombre scripts.js.

21
00:01:42,120 --> 00:01:49,060
Y yendo a index.html,

22
00:01:49,060 --> 00:01:54,890
simplemente voy a cortar este código JavaScript desde aquí y

23
00:01:54,890 --> 00:02:01,120
luego pegarlo en el archivo scripts.js,

24
00:02:01,120 --> 00:02:05,305
y luego guardar los cambios en el archivo scripts.js.

25
00:02:05,305 --> 00:02:10,915
Ahora que hemos movido todo nuestro código JavaScript a su propio archivo,

26
00:02:10,915 --> 00:02:20,430
ahora voy a incluir ese archivo JavaScript en mi index.html justo allí.

27
00:02:20,430 --> 00:02:24,540
Diría <script src =

28
00:02:24,540 --> 00:02:31,040
«js/scripts.js» Así que de esta manera,

29
00:02:31,040 --> 00:02:35,005
todo mi código JavaScript ahora se incluye de nuevo en mi archivo index.html.

30
00:02:35,005 --> 00:02:40,390
De esta manera, mi archivo index.html contiene todo el código html,

31
00:02:40,390 --> 00:02:46,345
y todo mi código CSS y JavaScript están desactivados en sus propios archivos separados.

32
00:02:46,345 --> 00:02:52,590
Permítanme copiar esta línea de scripts de la página index.html,

33
00:02:52,590 --> 00:02:56,330
y luego ir a la página aboutus.html,

34
00:02:56,330 --> 00:02:59,365
desplácese hacia abajo hasta la parte inferior donde he incluido

35
00:02:59,365 --> 00:03:02,540
otros scripts y luego pegue esto.

36
00:03:02,540 --> 00:03:07,405
Del mismo modo, permítanme ir a la página contactus.html

37
00:03:07,405 --> 00:03:11,545
y volver a desplazarme hacia abajo hasta la parte inferior del archivo allí.

38
00:03:11,545 --> 00:03:13,975
Déjame pegar esta línea.

39
00:03:13,975 --> 00:03:18,205
Vamos a guardar los cambios y luego pasar al siguiente paso.

40
00:03:18,205 --> 00:03:23,075
El siguiente paso que me gustaría hacer es instalar un par de

41
00:03:23,075 --> 00:03:29,905
módulos NPM que voy a utilizar para automatizar algunas tareas.

42
00:03:29,905 --> 00:03:34,310
El primer módulo NMP que voy a instalar se llama onchange.

43
00:03:34,310 --> 00:03:42,335
Este módulo onchange va a ver archivos en mi carpeta de proyecto,

44
00:03:42,335 --> 00:03:44,445
y luego cada vez que esos archivos cambian,

45
00:03:44,445 --> 00:03:48,865
entonces automáticamente desencadena una tarea que se ejecutará.

46
00:03:48,865 --> 00:03:50,660
De esta manera, por ejemplo,

47
00:03:50,660 --> 00:03:56,860
si configuro un reloj sin comillas en algunos archivos,

48
00:03:56,860 --> 00:03:59,305
por ejemplo mi archivo SCSS,

49
00:03:59,305 --> 00:04:02,270
entonces cada vez que hago cambios en mi archivo SCSS,

50
00:04:02,270 --> 00:04:07,220
se volverá a compilar automáticamente en el archivo CSS correspondiente.

51
00:04:07,220 --> 00:04:11,565
Ya tenemos el script que hace la recompilación.

52
00:04:11,565 --> 00:04:16,080
Así que todo lo que necesito hacer es poner un reloj en ese archivo en particular.

53
00:04:16,080 --> 00:04:20,675
Ahora aquí es donde voy a hacer uso del módulo NPM llamado Onchange.

54
00:04:20,675 --> 00:04:23,170
Hay otro modelo de NPM llamado Watch,

55
00:04:23,170 --> 00:04:25,945
que también puede usar para el mismo propósito.

56
00:04:25,945 --> 00:04:29,240
En este ejercicio voy a usar el módulo Onchange,

57
00:04:29,240 --> 00:04:34,765
luego tratamos con la concesión y el trago en las lecciones posteriores,

58
00:04:34,765 --> 00:04:37,580
vamos a usar el módulo Watch para el mismo propósito.

59
00:04:37,580 --> 00:04:42,845
Además, también voy a instalar otro módulo NPM llamado shell paralelo.

60
00:04:42,845 --> 00:04:46,250
Este módulo de Parallelshell me permite ejecutar

61
00:04:46,250 --> 00:04:51,320
varios scripts NPM en Parallelshells como su nombre lo indica.

62
00:04:51,320 --> 00:04:55,095
Así que de esta manera, se pueden

63
00:04:55,095 --> 00:04:59,785
ejecutar varios scripts NPM simultáneamente y me permiten vigilar varios archivos,

64
00:04:59,785 --> 00:05:03,835
y también llevar a cabo otras tareas.

65
00:05:03,835 --> 00:05:06,340
Así que vamos a instalar estos dos módulos NPM.

66
00:05:06,340 --> 00:05:09,645
Vamos a instalarlos localmente en este proyecto en particular.

67
00:05:09,645 --> 00:05:14,555
Entonces, para hacer eso, escribiré npm install.

68
00:05:14,555 --> 00:05:20,420
Debo —save-dev y luego diría onchange

69
00:05:20,420 --> 00:05:27,540
y paralelshell y luego esperar a que se instalen estos dos módulos NPM.

70
00:05:27,540 --> 00:05:29,755
Una vez que los dos módulos están instalados,

71
00:05:29,755 --> 00:05:35,745
entonces voy a incluir un par de scripts NPM en mi archivo package.json.

72
00:05:35,745 --> 00:05:40,930
Y te explicaré la razón, ya que incluimos esos guiones allí.

73
00:05:40,930 --> 00:05:43,650
Volviendo a mi archivo package.json,

74
00:05:43,650 --> 00:05:46,270
justo después de este SCSS,

75
00:05:46,270 --> 00:05:52,565
voy a incluir otro script llamado «watch:scss».

76
00:05:52,565 --> 00:05:55,125
Y como su nombre lo indica,

77
00:05:55,125 --> 00:05:59,290
esto va a mantener una vigilancia en los archivos SCSS.

78
00:05:59,290 --> 00:06:07,435
Entonces aquí es donde invocaré el módulo onchange NPM que acabo de instalar,

79
00:06:07,435 --> 00:06:12,610
y luego diría código único 'css/*.scss».

80
00:06:13,960 --> 00:06:20,465
Entonces, lo que significa que vigilar todos los archivos SCSS que están allí en la carpeta CSS.

81
00:06:20,465 --> 00:06:22,095
Si alguno de ellos cambia,

82
00:06:22,095 --> 00:06:29,535
entonces va a activar este script en particular y el script es «—npm

83
00:06:29,535 --> 00:06:35,915
run scss» porque ese

84
00:06:35,915 --> 00:06:42,380
es el script que va a hacer la recompilación de mi código SCSS en el código CSS correspondiente.

85
00:06:42,380 --> 00:06:46,075
Así que con esto, he configurado un reloj para mi SCSS.

86
00:06:46,075 --> 00:06:49,160
Obviamente puedo escribir «nmp watch: scss».

87
00:06:49,160 --> 00:06:56,700
Y luego activará el script allí con el módulo onchange,

88
00:06:56,700 --> 00:06:58,690
por lo que vigilará eso.

89
00:06:58,690 --> 00:07:02,960
Si está haciendo este ejercicio en una máquina con Windows, en

90
00:07:02,960 --> 00:07:06,345
lugar de la comilla simple en el script,

91
00:07:06,345 --> 00:07:10,760
debería reemplazarlo con la barra invertida y la comilla doble.

92
00:07:10,760 --> 00:07:13,660
Del mismo modo, la otra comilla simple

93
00:07:13,660 --> 00:07:16,490
también reemplaza eso con la barra invertida y la comilla doble.

94
00:07:16,490 --> 00:07:22,770
Entonces, así es como se verá el script en una computadora con Windows.

95
00:07:22,770 --> 00:07:28,385
Ahora, voy a hacer uso de Parallelshell

96
00:07:28,385 --> 00:07:35,765
para activar varios de estos scripts para que estén activos simultáneamente.

97
00:07:35,765 --> 00:07:39,670
Entonces diría «parallelshell»,

98
00:07:39,990 --> 00:07:42,660
y luego entre comillas,

99
00:07:42,660 --> 00:07:49,150
diría 'npm run watch:scss'.

100
00:07:49,590 --> 00:07:55,605
Por lo tanto, Parallelshell toma varios de estos como parámetros,

101
00:07:55,605 --> 00:07:58,380
cada uno entre comillas simples allí.

102
00:07:58,380 --> 00:08:05,380
Y el segundo es 'npm run lite'.

103
00:08:05,550 --> 00:08:11,630
Así que puede ver que este Parallelshell me permite ejecutar dos scripts simultáneamente,

104
00:08:11,630 --> 00:08:14,370
uno para vigilar mi archivo SCSS,

105
00:08:14,370 --> 00:08:17,745
el otro para ejecutar el shell lite.

106
00:08:17,745 --> 00:08:21,840
Si está haciendo este ejercicio en una máquina con Windows, en

107
00:08:21,840 --> 00:08:25,245
lugar del código único en el script,

108
00:08:25,245 --> 00:08:29,665
debería reemplazarlo con la barra invertida y la comilla doble.

109
00:08:29,665 --> 00:08:32,560
Del mismo modo, la otra comilla simple

110
00:08:32,560 --> 00:08:35,390
también reemplaza eso con la barra invertida y la comilla doble.

111
00:08:35,390 --> 00:08:41,685
Entonces, así es como se verá el script en una computadora con Windows.

112
00:08:41,685 --> 00:08:44,335
Ahora, después de hacer estos cambios,

113
00:08:44,335 --> 00:08:48,160
déjame guardar los cambios y luego voy a subir

114
00:08:48,160 --> 00:08:52,890
aquí y luego comenzar un script que tengo aquí.

115
00:08:52,890 --> 00:08:59,480
Cambiaré eso de «npm run lite» a «npm run watch: all».

116
00:09:01,950 --> 00:09:05,145
Y guarde los cambios aquí.

117
00:09:05,145 --> 00:09:10,460
Así que con esto, los scripts que necesito ahora están configurados.

118
00:09:10,460 --> 00:09:15,745
Así que ahora, puedo seguir adelante y hacer

119
00:09:15,745 --> 00:09:21,124
«inicio npm» y que básicamente iniciará estos dos scripts simultáneamente,

120
00:09:21,124 --> 00:09:24,850
uno vigilando mis archivos SCSS que a su vez

121
00:09:24,850 --> 00:09:28,825
desencadenará la compilación del SCSS a CSS,

122
00:09:28,825 --> 00:09:32,150
el otro que inicia mi servidor lite.

123
00:09:32,150 --> 00:09:41,125
Ahora, he comenzado en la pestaña de tabla y luego me mudé a la carpeta del proyecto,

124
00:09:41,125 --> 00:09:42,665
y luego agregue el mensaje.

125
00:09:42,665 --> 00:09:44,705
Escribiré «npm start».

126
00:09:44,705 --> 00:09:46,585
Y esto debería activar

127
00:09:46,585 --> 00:09:54,435
mi servidor lite que guardará los archivos de mi carpeta de confusión,

128
00:09:54,435 --> 00:10:02,290
y también activará el módulo Onchange para vigilar los archivos SCSS.

129
00:10:02,290 --> 00:10:09,100
Para ayudarle a ilustrar cómo este Onchange mantiene una vigilancia en mis archivos SCSS,

130
00:10:09,100 --> 00:10:14,705
lo que voy a hacer es ir a mi archivo styles.scss aquí,

131
00:10:14,705 --> 00:10:18,675
y luego simplemente guardaré el archivo nuevamente.

132
00:10:18,675 --> 00:10:20,860
Ahora, cada vez que se guarda este archivo,

133
00:10:20,860 --> 00:10:22,620
no voy a hacer ningún cambio en él.

134
00:10:22,620 --> 00:10:25,755
Sólo voy a ir a guardar en el archivo.

135
00:10:25,755 --> 00:10:27,840
Así que cada vez que este archivo se cambie,

136
00:10:27,840 --> 00:10:30,620
verá que inmediatamente

137
00:10:32,750 --> 00:10:40,495
Onchange activará el script SAS nodo que se ejecutará,

138
00:10:40,495 --> 00:10:47,555
lo que compilará el archivo de SCSS a CSS y creará el archivo CSS aquí,

139
00:10:47,555 --> 00:10:50,335
y luego guarda el archivo que también activará

140
00:10:50,335 --> 00:10:55,450
mi página web para que se vuelva a cargar en el navegador. Por lo

141
00:10:55,450 --> 00:11:03,285
tanto, esto es esencialmente lo que hemos logrado mediante el uso del módulo Onchange para

142
00:11:03,285 --> 00:11:07,660
vigilar los archivos que luego cambiaron

143
00:11:07,660 --> 00:11:12,395
activarán algunos de los scripts NPM automáticamente.

144
00:11:12,395 --> 00:11:20,790
Ahora, esto nos libera de las preocupaciones acerca de tener que activar manualmente estas tareas.

145
00:11:20,790 --> 00:11:25,390
Así, por ejemplo, si tiene un conjunto de tareas que desea activar automáticamente,

146
00:11:25,390 --> 00:11:27,395
entonces se producen ciertos cambios.

147
00:11:27,395 --> 00:11:35,100
Puede configurar fácilmente tales tareas de reloj para vigilar estos cambios.

148
00:11:35,100 --> 00:11:37,785
Ahora lo he ilustrado con un solo ejemplo.

149
00:11:37,785 --> 00:11:39,985
En mi ejemplo aquí,

150
00:11:39,985 --> 00:11:45,260
solo estoy modificando los archivos CSS que deben compilarse.

151
00:11:45,260 --> 00:11:50,125
Pero más adelante, luego trabajamos con marcos JavaScript.

152
00:11:50,125 --> 00:11:57,335
Verá que es posible que desee desencadenar compilaciones cuando varios archivos han cambiado.

153
00:11:57,335 --> 00:12:02,964
Y todo esto se puede gestionar fácilmente con este reloj de tareas.

154
00:12:02,964 --> 00:12:07,560
¿ Será esto, completamos este ejercicio.

155
00:12:07,560 --> 00:12:13,685
Aquí, hemos aprendido cómo configurar algunos scripts NPM más,

156
00:12:13,685 --> 00:12:20,855
y activar automáticamente algunos de los scripts mediante el módulo onchange NPM.

157
00:12:20,855 --> 00:12:24,550
También vimos el uso del módulo de shell paralelo para ejecutar

158
00:12:24,550 --> 00:12:32,050
varios scripts NPM simultáneamente en nuestra ventana de terminal.

159
00:12:32,200 --> 00:12:42,890
Este es un buen punto para que haga un comentario de Git con el mensaje «NPM Scripts Part 1".