Ahora que tenemos una comprensión de
los diversos pasos involucrados en la construcción e implementación de nuestro sitio web,
y también una breve introducción a los scripts de NPM en la conferencia anterior,
vamos a profundizar en el desarrollo de
scripts NPM para automatizar muchas de las tareas de las que habíamos hablado anteriormente.
Como vio en la conferencia anterior,
ya tenemos un par de scripts NPM que habíamos incluido en nuestro archivo package.json,
uno para iniciar el servidor lite y el segundo
para convertir el código SCSS en CSS.
En este ejercicio y el siguiente,
exploraremos los scripts de NPM con un poco más de detalle.
Para comenzar, primero hagamos algo de limpieza en el archivo index.html.
Al ir al archivo index.html,
vemos que tenemos este código JavaScript en la parte inferior de este archivo index.html.
Preferiría mantener este código JavaScript en
un archivo separado que contiene todos nuestros scripts,
y luego incluir ese archivo en mi index.html.
Para hacer eso, vamos a crear otra carpeta aquí con el nombre js.
Y en esta carpeta js,
voy a crear un nuevo archivo con el nombre scripts.js.
Y yendo a index.html,
simplemente voy a cortar este código JavaScript desde aquí y
luego pegarlo en el archivo scripts.js,
y luego guardar los cambios en el archivo scripts.js.
Ahora que hemos movido todo nuestro código JavaScript a su propio archivo,
ahora voy a incluir ese archivo JavaScript en mi index.html justo allí.
Diría <script src =
«js/scripts.js» Así que de esta manera,
todo mi código JavaScript ahora se incluye de nuevo en mi archivo index.html.
De esta manera, mi archivo index.html contiene todo el código html,
y todo mi código CSS y JavaScript están desactivados en sus propios archivos separados.
Permítanme copiar esta línea de scripts de la página index.html,
y luego ir a la página aboutus.html,
desplácese hacia abajo hasta la parte inferior donde he incluido
otros scripts y luego pegue esto.
Del mismo modo, permítanme ir a la página contactus.html
y volver a desplazarme hacia abajo hasta la parte inferior del archivo allí.
Déjame pegar esta línea.
Vamos a guardar los cambios y luego pasar al siguiente paso.
El siguiente paso que me gustaría hacer es instalar un par de
módulos NPM que voy a utilizar para automatizar algunas tareas.
El primer módulo NMP que voy a instalar se llama onchange.
Este módulo onchange va a ver archivos en mi carpeta de proyecto,
y luego cada vez que esos archivos cambian,
entonces automáticamente desencadena una tarea que se ejecutará.
De esta manera, por ejemplo,
si configuro un reloj sin comillas en algunos archivos,
por ejemplo mi archivo SCSS,
entonces cada vez que hago cambios en mi archivo SCSS,
se volverá a compilar automáticamente en el archivo CSS correspondiente.
Ya tenemos el script que hace la recompilación.
Así que todo lo que necesito hacer es poner un reloj en ese archivo en particular.
Ahora aquí es donde voy a hacer uso del módulo NPM llamado Onchange.
Hay otro modelo de NPM llamado Watch,
que también puede usar para el mismo propósito.
En este ejercicio voy a usar el módulo Onchange,
luego tratamos con la concesión y el trago en las lecciones posteriores,
vamos a usar el módulo Watch para el mismo propósito.
Además, también voy a instalar otro módulo NPM llamado shell paralelo.
Este módulo de Parallelshell me permite ejecutar
varios scripts NPM en Parallelshells como su nombre lo indica.
Así que de esta manera, se pueden
ejecutar varios scripts NPM simultáneamente y me permiten vigilar varios archivos,
y también llevar a cabo otras tareas.
Así que vamos a instalar estos dos módulos NPM.
Vamos a instalarlos localmente en este proyecto en particular.
Entonces, para hacer eso, escribiré npm install.
Debo —save-dev y luego diría onchange
y paralelshell y luego esperar a que se instalen estos dos módulos NPM.
Una vez que los dos módulos están instalados,
entonces voy a incluir un par de scripts NPM en mi archivo package.json.
Y te explicaré la razón, ya que incluimos esos guiones allí.
Volviendo a mi archivo package.json,
justo después de este SCSS,
voy a incluir otro script llamado «watch:scss».
Y como su nombre lo indica,
esto va a mantener una vigilancia en los archivos SCSS.
Entonces aquí es donde invocaré el módulo onchange NPM que acabo de instalar,
y luego diría código único 'css/*.scss».
Entonces, lo que significa que vigilar todos los archivos SCSS que están allí en la carpeta CSS.
Si alguno de ellos cambia,
entonces va a activar este script en particular y el script es «—npm
run scss» porque ese
es el script que va a hacer la recompilación de mi código SCSS en el código CSS correspondiente.
Así que con esto, he configurado un reloj para mi SCSS.
Obviamente puedo escribir «nmp watch: scss».
Y luego activará el script allí con el módulo onchange,
por lo que vigilará eso.
Si está haciendo este ejercicio en una máquina con Windows, en
lugar de la comilla simple en el script,
debería reemplazarlo con la barra invertida y la comilla doble.
Del mismo modo, la otra comilla simple
también reemplaza eso con la barra invertida y la comilla doble.
Entonces, así es como se verá el script en una computadora con Windows.
Ahora, voy a hacer uso de Parallelshell
para activar varios de estos scripts para que estén activos simultáneamente.
Entonces diría «parallelshell»,
y luego entre comillas,
diría 'npm run watch:scss'.
Por lo tanto, Parallelshell toma varios de estos como parámetros,
cada uno entre comillas simples allí.
Y el segundo es 'npm run lite'.
Así que puede ver que este Parallelshell me permite ejecutar dos scripts simultáneamente,
uno para vigilar mi archivo SCSS,
el otro para ejecutar el shell lite.
Si está haciendo este ejercicio en una máquina con Windows, en
lugar del código único en el script,
debería reemplazarlo con la barra invertida y la comilla doble.
Del mismo modo, la otra comilla simple
también reemplaza eso con la barra invertida y la comilla doble.
Entonces, así es como se verá el script en una computadora con Windows.
Ahora, después de hacer estos cambios,
déjame guardar los cambios y luego voy a subir
aquí y luego comenzar un script que tengo aquí.
Cambiaré eso de «npm run lite» a «npm run watch: all».
Y guarde los cambios aquí.
Así que con esto, los scripts que necesito ahora están configurados.
Así que ahora, puedo seguir adelante y hacer
«inicio npm» y que básicamente iniciará estos dos scripts simultáneamente,
uno vigilando mis archivos SCSS que a su vez
desencadenará la compilación del SCSS a CSS,
el otro que inicia mi servidor lite.
Ahora, he comenzado en la pestaña de tabla y luego me mudé a la carpeta del proyecto,
y luego agregue el mensaje.
Escribiré «npm start».
Y esto debería activar
mi servidor lite que guardará los archivos de mi carpeta de confusión,
y también activará el módulo Onchange para vigilar los archivos SCSS.
Para ayudarle a ilustrar cómo este Onchange mantiene una vigilancia en mis archivos SCSS,
lo que voy a hacer es ir a mi archivo styles.scss aquí,
y luego simplemente guardaré el archivo nuevamente.
Ahora, cada vez que se guarda este archivo,
no voy a hacer ningún cambio en él.
Sólo voy a ir a guardar en el archivo.
Así que cada vez que este archivo se cambie,
verá que inmediatamente
Onchange activará el script SAS nodo que se ejecutará,
lo que compilará el archivo de SCSS a CSS y creará el archivo CSS aquí,
y luego guarda el archivo que también activará
mi página web para que se vuelva a cargar en el navegador. Por lo
tanto, esto es esencialmente lo que hemos logrado mediante el uso del módulo Onchange para
vigilar los archivos que luego cambiaron
activarán algunos de los scripts NPM automáticamente.
Ahora, esto nos libera de las preocupaciones acerca de tener que activar manualmente estas tareas.
Así, por ejemplo, si tiene un conjunto de tareas que desea activar automáticamente,
entonces se producen ciertos cambios.
Puede configurar fácilmente tales tareas de reloj para vigilar estos cambios.
Ahora lo he ilustrado con un solo ejemplo.
En mi ejemplo aquí,
solo estoy modificando los archivos CSS que deben compilarse.
Pero más adelante, luego trabajamos con marcos JavaScript.
Verá que es posible que desee desencadenar compilaciones cuando varios archivos han cambiado.
Y todo esto se puede gestionar fácilmente con este reloj de tareas.
¿ Será esto, completamos este ejercicio.
Aquí, hemos aprendido cómo configurar algunos scripts NPM más,
y activar automáticamente algunos de los scripts mediante el módulo onchange NPM.
También vimos el uso del módulo de shell paralelo para ejecutar
varios scripts NPM simultáneamente en nuestra ventana de terminal.
Este es un buen punto para que haga un comentario de Git con el mensaje «NPM Scripts Part 1".