[MÚSICA]
Ahora continuaremos nuestro viaje con scripts de NPM en este próximo ejercicio.
Aquí vamos a aprender cómo construir
una carpeta de distribución que contiene todos los archivos de
nuestro proyecto que simplemente podemos implementar en un servidor web que aloja nuestro sitio web.
Así que dados los archivos HTML, CSS y JavaScript que
ya hemos preparado en nuestra carpeta de proyectos, vamos a, a partir de ellos,
procesarlos utilizando las diversas tareas de las que hablamos.
Eso es hacer una modificación CSS,
concatenación y uglification, minificación
y minificación HTML de JavaScript y
luego generar una carpeta de distribución con todos los archivos.
Pero esencialmente forma el conjunto de archivos que se pueden
implementar en nuestro servidor web que aloja nuestro sitio web.
Para ayudarle a entender lo que vamos a hacer en este ejercicio en particular,
como observamos en nuestra página index.html, tenemos un conjunto de
archivos CSS que usted incluyó aquí usando esta etiqueta de enlace aquí.
Del mismo modo, tiene un conjunto de secuencias de comandos que ha incluido
en la parte inferior de esta página utilizando la etiqueta de script.
Hemos incluido un conjunto de código JavaScript.
Ahora, lo que vamos a hacer en este ejercicio es combinar todos estos
archivos en un único archivo JavaScript que será entregado
desde nuestro servidor web a un navegador que está tratando de ver nuestro sitio web.
De esta forma, minimizamos el número de descargas que el navegador necesita hacer para
renderizar nuestro sitio web.
Del mismo modo, vamos a combinar todo el código CSS en un solo archivo CSS,
para que pueda ser entregado.
Entonces, el archivo CSS combinado contendrá todo el código para
Bootstrap más Bootstrap social, y también el Font Awesome y
también el código CSS que nosotros mismos escribimos.
Del mismo modo, habrá un único archivo JavaScript que
contendrá el jQuery tether, Bootstrap y el código JavaScript que
nosotros mismos escribimos, todos juntos en un solo archivo.
Ahora, así es como puede hacer la implementación de sus páginas web.
Y en lugar de tener múltiples archivos de este tipo allí, una forma en que
se realiza la implementación es combinarlos en un solo archivo para que una sola descarga
obtenga todo el código JavaScript necesario para renderizar su página web.
Una sola descarga obtienes todo el código CSS necesario para
renderizar tu página web.
Y luego, por supuesto, el archivo HTML en sí se va a descargar.
Para completar estas tareas, necesitamos usar
un cierto conjunto de módulos NPM para lograr esto.
Ahora, lo que terminaremos haciendo es construir una carpeta
en nuestro archivo de proyectos, y luego llamamos a esa carpeta como dist, D-I-S-T.
Solo lo estoy nombrando aleatoriamente como una carpeta dist.
En mi caso, lo que quiero decir con la carpeta dist es una carpeta de distribución.
Al final del conjunto de pasos que vamos a hacer, esta carpeta contendrá todos
los archivos que se pueden copiar simplemente en el servidor web que aloja nuestro sitio web.
Para empezar, lo que vamos a hacer es configurar
aquí un conjunto de scripts que nos ayuden a automatizar este proceso.
Así que primero, podríamos
preparar la carpeta de distribución una vez, entonces tal vez podamos hacer algunas ediciones
a nuestros archivos fuente, entonces es posible que tengamos que volver a compilar nuestra carpeta de distribución.
Primer paso, estableceríamos el script para limpiar esa carpeta de distribución que
significa esencialmente, eliminar la carpeta de distribución.
Así que para hacer eso, voy a tomar la ayuda de un módulo NPM llamado como rimfraf.
Así que instalaré npm —save-dev rimfraf.
Este módulo nos ayuda a limpiar completamente una carpeta.
Entonces, una vez que haya instalado esto, configuraré un script
en mi archivo package.json para limpiar todos los archivos.
Al ir al archivo package.json, voy a agregar, así que
recuerde siempre que el coma es muy, muy importante en esos scripts.
A veces te toparás con problemas sólo porque olvidaste la coma.
Así que asegúrate de poner esas comas cuando sea necesario.
La siguiente descripción que voy a agregar es, limpia,
obviamente como su nombre lo indica, esto va a limpiar mi carpeta.
Así que voy a decir rimraf dist.
Lo que esto significa es que esto, cuando se ejecuta,
limpiará la carpeta de distribución.
Así que agregaré eso, y
luego pondré esa coma allí porque voy a agregar más scripts debajo de esto.
Así que déjame guardar los cambios, el siguiente paso que voy a hacer es
instalar un módulo npm llamado copy files que se usan para copiar
algunos archivos de fuente de mi carpeta de módulos de nodo en mi carpeta de distribución.
De modo que cuando se implementa, los archivos de fuentes también se implementan. Al
ir al terminal, el próximo paquete que voy a instalar es
npm -g, recuerde que esto significa que debe instalarse globalmente.
Como estoy haciendo esto en una Mac,
debería decir sudo npm -g, si lo estás haciendo en Windows, no necesitas el sudo.
sudo npm -g instalar archivos de copia.
Y luego, una vez instalado, este módulo NPM me ayudará a copiar
archivos de una carpeta a otra carpeta.
Ahora, permítanme presentar otro script NPM aquí.
Ir a mi archivo package.json,
voy a crear un nuevo scrip aquí copyfonts nombre.
Este script me permitirá copiar todos los archivos de fuentes de mi carpeta
Font Awesome en mi carpeta de distribución.
Para que cuando mi sitio web se renderiza,
todos estos archivos de fuentes también se pueden enviar, de modo que
mis páginas web se procesen correctamente con las fuentes Font Awesome en su lugar.
Entonces, para hacer eso, diré, copiar archivos -f,
-f significa que simplemente copia los archivos sin la jerarquía llena y
simplemente copia los archivos de una ubicación a otra ubicación.
Así que diré copiar archivos -f
node_modules/font_awesome/fonts/star
Y dist/fonts,
Y luego guardar los cambios.
Permítanme ahora ilustrar cómo estos dos scripts npm funcionan juntos.
Al ir a mi ventana de comando, escribiré
npm run copyfonts.
Cuando esto se ejecuta, creará una carpeta
llamada dist en mi jerarquía de carpetas de proyecto.
Y luego dentro del dist,
habrá una subcarpeta llamada fuentes, que contendrá los archivos de fuentes.
Entonces, al ejecutar esto,
notará inmediatamente que la carpeta de distribución se crea aquí.
Y dentro de la carpeta de distribución,
puede ver que hay una subcarpeta llamada fuentes.
Y ahí dentro, todos los archivos fontawesome han sido copiados.
Así es como funciona el script copyfonts.
Ahora, voy a mostrarte cómo funciona el script limpio.
Entonces, si escribo npm run clean, esto eliminará esa carpeta de distribución.
Entonces, cuando ejecuto eso, notarías que
la carpeta de distribución se elimina de la jerarquía de mi carpeta de proyectos.
Así es como funciona la limpieza.
Ahora que tenemos estos dos scripts configurados,
ahora tenemos que ser capaces de construir los archivos de distribución restantes.
En el siguiente paso, vamos a instalar un módulo de nodo llamado imagemin-cli,
que es la interfaz de línea de comandos para el módulo imagemin.
El módulo imaginemin tomará una secta de archivos de imagen y luego los comprimirá.
Así que apiló el tamaño de esos archivos se minimizan en la medida de lo posible,
pero aún así se renderiza correctamente cuando se renderiza nuestro sitio web.
De esta manera, reduciremos la cantidad de datos que
necesita ser descargados por el navegador cuando necesite renderizar nuestra página web.
Por lo tanto, si está incluyendo imágenes en su página web, entonces la tarea imagemin es
algo que debe aprender para reducir el tamaño de sus archivos de imagen.
Entonces, para hacer eso, voy a instalar este módulo de nodo imagemin como un módulo global.
Así que escribo sudo, ya que estoy usando un Mac,
npm -g instalo imagemin-cli
y luego instalo este módulo de nodo.
A veces, en un Mac, algunos de los plugins de imagemin no se instalan correctamente.
Entonces, es por eso que estoy dando estas banderas adicionales al comando,
están diciendo —unsafe-perm=true y —allow-root.
Una vez completada la instalación,
permítanme configurar un script para hacer esa ampliación de mis imágenes.
Voy a package.json de nuevo, voy a configurar el siguiente script aquí.
Así que yo diría que imagemin es el nombre del guión que voy a hacer,
y yo diría imagemin.
Y luego, dado que todas mis imágenes están en la carpeta img, diría img/*,
y luego muchos archivos se copiarán a dist image.
Entonces, los archivos de imagen originales de la carpeta de imágenes que tengo se copiarán
en la carpeta de distribución y en la subcarpeta de imágenes allí.
Así que esto completa mi imagen.
Permítanme continuar con la configuración restante, y
luego veremos cómo vamos a hacer uso de los scripts que ya hemos configurado allí.
Ahora que tengo la carpeta de prueba allí, que podría crear,
no quiero registrar la carpeta dist en mi repositorio de Git.
Entonces, es por eso que en mi archivo.gitignore, también voy a agregar en la carpeta dist.
Entonces, la carpeta dist se ignorará cuando haga mi registro en el repositorio de Git.
Así que vamos a guardar los cambios, volviendo a package.json.
Ahora, lo que voy a hacer a continuación es instalar tres
módulos de nodo diferentes, que me permiten hacer las modificaciones
a mi archivo index.html y los archivos HTML restantes allí.
En el símbolo del sistema, escriba npm install —save dev.
Voy a instalar un módulo llamado usemin-cli.
Este usemin-cli es el que me permite hacer la transformación desde mi
archivo HTML.
Y luego concatenar y combinar todos los
archivos CSS en un solo archivo CSS, y luego ponerlo en la carpeta de distribución.
Del mismo modo, todos los archivos JS se concatenarán y se colocarán en una sola carpeta.
Entonces este usemin-cli es útil.
Pero este usemin-cli toma la ayuda
de otros tres módulos de nodo llamados cssmin,
luego uglifyjs y htmlmin.
Así que necesito instalar estos tres módulos de nodo además de usemin-cli.
Y voy a instalar esto localmente en mi proyecto, así
que es por eso que npm install —save-def.
Así que de esta manera, serán recordados en mi archivo package.json.
Así que sigamos adelante y completemos la instalación.
Ahora que he instalado el usemin y
los módulos de nodo relacionados, necesito hacer alguna transformación en
mi archivo index.html y los archivos HTML restantes. De
tal manera que usemin node_module reconoce que este grupo es
un montón de archivos CSS que necesitan ser comprimidos, calculados y verificados.
Del mismo modo, este es el grupo de archivos JavaScript que deben ser uglyfied
, combinados y concatenados juntos.
Entonces, para ayudar al paquete usemin
a funcionar, necesito agregar un poco de código en mi archivo index.html.
Así que justo antes del primer enlace allí,
voy a añadir una marca aquí arriba,
que dice! — compilar:css.
¡ Ahora, esto! —, como reconocerás,
es un comentario desde la perspectiva html.
Así que dentro de ese comentario, voy a incluir que esta línea
en particular va a ser utilizada por el menú de uso para reconocer el bloque de
código que especifica todos los archivos CSS que necesitan ser transferidos.
Así que digo build.css, y luego especificaré
el nombre de archivo como css/main.css.
Esta es la sintaxis para especificar.
Lo que esto significa es que estos bloques de archivos CSS se combinarán juntos,
y luego se concatenarán, minificarán y luego se colocarán en este archivo llamado main.css.
Y entonces este bloque se identificará en el otro lado diciendo: «
Guión...»
Olvidé incluir el doble guión al final.
Esa es la razón por la que esto no estaba cambiando colores.
Así que a veces te alegra que tu
editor esté señalando estos errores potenciales que podrías estar cometiendo.
Así que ahí mismo diría endbuild y
luego — corchete derecho allí.
Ahora, lo que sea que esté entre esta compilación y
endbuild, este grupo será tratado como una unidad para
ser combinado por nuestro módulo usemin npm allí.
Vea la sintaxis que el módulo usemin utiliza allí.
Necesito hacer la misma transformación a contactus.html y aboutus.html también.
Así que voy a copiar este de
aquí el perezoso que soy.
Simplemente copiaré y
pegaré en contactus.html y
luego también aboutus.html allí.
Del mismo modo, volviendo a index.html,
copiaré esta incompilación y luego también copiaré eso en
los datos contactus.html y aboutus.html.
Vale, guardemos los cambios en todos los archivos.
Luego, volviendo a index.html.
Voy a repetir lo mismo en la parte inferior para mis
scripts de JavaScript que he incluido allí.
Así que, yendo al fondo aquí,
lo que tengo que hacer aquí,
es especificar <! — compilar js,
y voy a decir js/main.js.
Doble guión, barra diagonal.
Así que ese es el comienzo del bloque y luego el final se especifica por,
Build, ¿vale?
Entonces, con estos cambios, ahora, mi archivo index.html está listo,
y tengo que hacer la misma transformación a contactus.html en la parte inferior.
Y aboutus.html también en la parte inferior.
Del mismo modo, esta compilación copiada en. En
contactus.html y aboutus.html y luego guarde todos los archivos.
Y eso prepara nuestros archivos HTML para
ser transformados para preparar la carpeta de distribución.
Estos archivos permanecerán como tales, pero luego los archivos transformados se colocarán en
la carpeta de distribución creada a partir de estos archivos.
Ahora, una vez que completemos eso, vamos a configurar algunos guiones.
Ir a package.json, configuraré mi siguiente script llamado usemin.
Y luego esto dice usemin,
contactus.html -d dist, esta es la sintaxis para
especificar -d dist, lo que significa que el destino de
esta carpeta dist de distribución.
Y luego diría htmlmin, esto también va a minimizar el archivo HTML.
Por lo tanto, eliminará todos los espacios y comentarios extraños del archivo HTML.
Pero lo comprimen para
que contenga el número mínimo de caracteres allí.
Vamos a ver el resultado después de completar y hacer la transformación allí.
Entonces eso y luego, no solo eso,
y luego htmlmin, y luego decir
-o dist/contactus.html y
&&, esto significa que hay
más por venir después de esto.
Luego diré usemin
luego aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Entonces ese es el segundo para transformar el archivo aboutus.html.
Y luego &&, este es un script largo,
usemin index.html,
tenemos que transformar todos los archivos.
Entonces, es por eso que necesito especificar cada uno explícitamente allí.
usemin no toma comodines, por lo
que esa es la razón por la que tengo que especificar la retención como [INAUDIBLE].
Y así usemin index.html
-d dist —htmlmin
-o dist/index.html.
Y luego, después de eso, puse una coma porque voy a introducir el siguiente script,
que es, llamada compilación.
Entonces, este script de compilación creará mi carpeta de distribución.
Entonces, para crear mi carpeta
de distribución, lo primero que voy a hacer es npm ejecutar limpio.
Y luego npm ejecuta copyfonts.
Ya ha visto estos dos en acción anteriormente,
entonces diré que npm ejecuta imagemin para crear las imágenes minimizadas,
y luego diría que npm ejecuta usemin.
Y este script en particular construirá mi carpeta
de distribución, cuyo contenido se puede copiar a mi servidor web para resolver mi tono.
Guarde los cambios.
Veamos ahora cómo construimos el sitio web.
En este punto, para construir nuestro sitio web y
el símbolo del sistema es simplemente escriba npm run build y luego simplemente ejecute.
Ese script, que a su vez ejecutará un conjunto
de cualquiera de los scripts, que a su vez completará todo el conjunto
de tareas que deben ejecutarse para preparar mi carpeta de distribución.
Entonces, sigamos adelante y ejecutemos esto y
luego esto se ejecutará a través de todos los diferentes scripts allí.
Se tarda unos minutos en completarse y, cuando se complete, la
carpeta de distribución estará lista para su implementación en el servidor web.
Ir a nuestro editor,
ahora ve que la carpeta de distribución está lista.
Dentro de la carpeta de distribución verá los tres archivos de índice,
y en la carpeta CSS, verá el único archivo llamado m ain.css,
que contiene todos los Bootstraps CSS, Bootstraps CSS
y el código CSS que ha creado.
Y la carpeta JS contendrá el main.js,
que contiene el Bootstrap, el jQuery y
todo el montón de código JavaScript combinado en un solo archivo.
La imagen contendrá las imágenes optimizadas, y las fuentes, obviamente,
que ha visto anteriormente, contienen los archivos de fuentes.
Ahora, echemos un vistazo rápido a index.html que se ha creado aquí.
Entonces, cuando mires el index.html que se ha creado aquí,
notarás que todo es literalmente ilegible,
porque cuando hiciste HTML min ha quitado todos los
comentarios extraños, ha quitado todos los espacios, y
luego creó todo este conjunto de ejecución de caracteres.
Para la computadora no hace ninguna diferencia porque representará esta
página web igual de bien.
Para ti y para mí, hace una diferencia, porque no podemos leer esto fácilmente.
Entonces esto es lo que la minificación causa a su archivo HTML.
Echemos un vistazo al main.css.
Cuando miras el main.css, ves que todo se cruje
en una sola unidad, a medida que vas al fondo.
Si usted es lo suficientemente valiente, vaya a la parte inferior y luego verá la,
Verá horas específicamente escritas
clases CSS justo abajo en la parte inferior aquí.
Justo ahí, reconoces el botón del carrusel, y otras cosas,
nabber-dark, y otras cosas allí, así que todo está metido en.
Así que eso es lo que la minificación, y los costos.
Main.js, lo mismo.
Código ilegible allí.
Su computadora, no hay diferencia.
Así que con esto, nuestra carpeta de distribución ahora está completa.
Echemos un vistazo a nuestra carpeta de distribución.
Afortunadamente, tenemos nuestro servidor de luz ya funcionando.
Entonces, lo que voy a hacer es ir al navegador y
luego revisar el archivo CLM listo índice en esta carpeta de distribución para
ver si se está renderizando correctamente o no.
Ir al navegador, en mi barra de direcciones escribiré,
dist index.html, y
notaré que este archivo en particular es el
archivo de distribución que se ha creado, y contiene exactamente lo mismo y se
renderiza exactamente de la misma manera que nuestra página web original que creamos.
Acerca de, de manera similar, observe que este aboutus.html es de la
carpeta de distribución y esto se representa exactamente como antes,
y también el archivo contactus.html.
Todo funciona perfectamente.
Así que ahora todo lo que le queda para implementar su página web,
o su sitio web, es simplemente copiar el contenido de la carpeta dist,
y luego subirlo a su servidor web, y
luego su servidor web está funcionando, sirviendo su sitio web.
Con esto, completamos este ejercicio.
En este ejercicio, vimos cómo podemos hacer uso de
scripts NBM para construir e implementar nuestro sitio web.
Este puede ser un buen momento
para que usted haga un Get Comment con mensajes NPM Scripts, Parte 2.
[ MÚSICA]