Es hora de empezar a gruñir.
En este y el siguiente ejercicio vamos a repetir
el mismo tipo de configuración que hicimos con los scripts de NPM.
En la primera parte, vamos a configurar la conversión de SCSS a CSS.
Luego configuraremos una tarea de vigilancia y también serviremos el código usando la sincronización del navegador.
En la segunda parte del ejercicio,
haremos uso de Usman y de las diversas tareas para preparar el pliegue de distribución.
Estos ejercicios no son de ninguna manera la única forma de
implementar configuraciones de Grunt o archivos de llamada.
Esto es sólo una ilustración de cómo podemos hacer uso de estas herramientas.
Es posible que desee idear su propia forma de configurar
su archivo Grunt y su archivo de llamada para sus proyectos.
Nuestro primer paso en hacer uso de Grunt es configurar la CLI de Grunt como un módulo global de NPM.
Para hacer eso, agregue el tipo de mensaje: NPM -g install Grunt CLI.
Esta es la interfaz de línea de comandos para Grunt.
Una vez que esto esté configurado,
entonces vamos a configurar un módulo local de NPM de Grunt para su uso dentro de nuestros proyectos.
El Grunt CLI nos permite hacer uso de Grunt.
Hemos creado la CLI de Grunt.
Luego, el siguiente paso es configurar- Grunt localmente,
por lo que; NPM instala Grunt menos guardar dev.
A continuación, instale el Grunt localmente.
Una vez que haya completado estos dos pasos,
el siguiente paso es ir a nuestro proyecto y luego crear un nuevo archivo,
y lo nombraremos como Gruntfile.js.
Dentro de este Gruntfile.js, vamos a configurar el código para configurar nuestras tareas de Grunt.
En este archivo, el primer paso es agregar 'use strict' que significa,
'use strict' código JavaScript.
Luego dices module.exports
= función (gruñido).
Luego dentro de aquí, configuraremos la configuración de Grunt para todas las tareas.
Como mencioné anteriormente, Grunt es un corredor de tareas basado en la configuración.
Por lo tanto, instalaremos los diversos plug-ins de Grunt para
las diversas tareas y luego los configuraremos en nuestro archivo Grunt.
Para hacer la configuración,
vamos a añadir el código aquí,
diciendo: Grunt.InitConfig
y dentro de este InitConfig,
vamos a añadir en la configuración para las tareas de Grunt de la rueda.
Una vez que hayas completado esto,
guardemos los cambios.
En nuestro próximo paso,
vamos a configurar algunos plug-ins de Grunt para permitirnos convertir código SCSS en código CSS.
Para hacer eso, instalaré un módulo NPM llamado
Grunt SASS — Grunt SASS, guarde def.
Además de esto,
voy a configurar dos módulos más de Grunt llamados,
NPM Install Time Grunt y Jit Grunt.
Estos dos módulos — Tiempo Gruñido y Jit Gruñido.
El módulo Time Grunt imprime las estadísticas de tiempo para ejecutar las diversas tareas de Grunt.
El módulo Jit Grunt se utiliza para cargar en
esos plug-ins Grunt siempre que se requieran dentro de cualquier aplicación.
La otra alternativa es cargar
los diferentes módulos Grunt explícitamente en su archivo de configuración de Grunt.
Prefiero usar el Jit Grunt para que se encargue de cargar
en cualquier plug-ins de Grunt que necesite según sea necesario,
como cuando los uso en el código.
Instale estos dos Time Grunt y Jit Grunt y una vez que estén instalados,
entonces es hora de configurar nuestra tarea de conversión SASS.
Ahora, obviamente, debe preguntarse por qué escribimos este
module.exports y luego funcionamos y así sucesivamente.
Así es como definimos los módulos de nodo.
Vamos a tratar con la estructura de los módulos de nodo y por qué usamos este enfoque
en el curso de módulos de nodo del lado del servidor más adelante en la especialización.
Por el momento, solo acepte que así es como se escribe el código para Grunt,
porque el archivo Grunt es en sí mismo
un módulo de nodo que se va a cargar en varios plug-ins de Grunt.
Después de hacer eso, vamos a requerir un par de plugins Grunt aquí.
Para hacer eso, diremos require ('tiempo- gruño'),
y diremos gruñido versus la configuración que usamos para cargar en el Tiempo Gruñido.
Para requerir, como aprenderá más adelante cuando aprenda acerca de los módulos de nodo,
es una forma de decir que la carga en el módulo de nodo de tiempo Grunt que
se utilizará dentro de este módulo de nodo en particular.
Del mismo modo, requeriré el módulo de nodo Jit Grunt.
Este módulo de nodo de Jit Grunt se asegura de que se cargue en
cualquier otro módulo de nodo o cualquier otro plug-ins de Grunt, que son módulos de nodo
, básicamente, como cuando realmente están implícitos dentro de mi Grunt para hacer varias tareas.
La alternativa sería cargar manualmente en todos y cada uno de
esos plug-ins Grunt explícitamente mediante el uso de la instrucción requerida.
Me estoy ahorrando un poco de problemas simplemente usando Jit Grunt,
que se encarga de cargar esos módulos de nodo cuando sea necesario.
Ahora pasando a la configuración,
como entendemos, Grunt trabaja en la configuración,
por lo que cada plug-in de Grunt que queremos emplear para realizar una tarea,
debe configurarse dentro de este archivo Grunt InitConfig.
Esta configuración básicamente es un objeto JavaScript básicamente.
Si está familiarizado con los objetos JavaScript,
comienza a entender la sintaxis muy, muy rápidamente.
La primera tarea que voy a configurar es SASS.
Entonces, escribo SASS aquí,
y luego dentro de SASS, digo dist.
Ahora tiene que creer que así es como se hace la configuración.
Entonces, digo dist,
y luego dentro,
digo archivos, y luego allí,
especifico los archivos que deben ser convertidos.
Digo, CSS/styles.CSS, que
depende de CSS/Styles.scss.
Con esto, completamos la configuración de la tarea SASS aquí.
Una vez que completemos la configuración de la tarea SASS,
si realmente desea ejecutar la tarea SASS,
entonces abajo configuraría la tarea SASS diciendo «Grunt.RegisterTask»,
y luego llamaré a esta tarea CSS,
y luego,
entre corchetes, diré «SASS».
Ahora, para entender la sintaxis aquí,
esto como puede ver dice «Grunt.RegisterTask» y el nombre de esta tarea es CSS.
¿ Y qué implica esta tarea?
Esta tarea implica ejecutar la tarea SASS que ya se ha configurado aquí.
Así es como leemos esta sintaxis aquí.
Si no lo desea, no necesita configurarlo,
ya que emplearemos SASS junto con la tarea de vigilancia para
ejecutar automáticamente el SASS cuando cambie nuestro archivo SCSS.
Con esto, guardemos los cambios.
Permítanme mostrarles esta tarea particular en acción.
Si configura la tarea con el nombre CSS allí,
luego agrega el mensaje,
puede escribir «grunt.CSS» y luego ejecutará
la tarea de convertir el código sass en código CSS.
Ir al símbolo del sistema, en el símbolo del sistema,
escriba «grunt.CSS» y verá
la tarea SASS ejecutándose y luego convirtiendo el archivo styles.sess a styles.CSS.
Además, como puede ver,
el Time Grunt imprimirá estadísticas como esta
para indicar cuánto tiempo tomó cada una de esas tareas.
Si eso es de interés para usted,
entonces puede ver estos detalles aquí.
En nuestro siguiente paso, vamos a configurar el reloj y el servidor,
para mantener una vigilancia en
los archivos SASS y convertirlos automáticamente cuando se cambien,
y luego configuraremos el servidor,
usando BrowserSync para servir nuestro sitio web.
Para configurar las tareas de Watch and Serve,
voy a instalar un par de plug-ins gruñidos más,
así que diré npm install,
grunt-contrib-watch menos save-dev.
Así que este es el reloj gruñido.
Grunt plug-in que es un módulo de nodo, así que instale eso.
Por lo tanto, el complemento Watch le permite vigilar sus diversos archivos.
El próximo complemento que voy
a instalar es grunt-browser-sync.
El módulo BrowserSync es el que voy a utilizar,
para guardar los archivos de mi carpeta de proyecto, de
modo que pueda ver el sitio web en un navegador.
Una vez que he instalado esos dos módulos,
es hora de entrar en mi grunt.initconfig
y luego configurar las dos tareas.
Uno para vigilar,
el segundo para servir los archivos usando BrowserSync.
Entonces, volviendo a mi initconfig,
ponga una coma allí después del SASS,
y luego muévase a la siguiente línea.
Recuerda siempre poner esta coma ahí.
Una coma que falta provoca un montón de dolor de cabeza cuando intentas ejecutar tus tareas gruñidas.
Es muy difícil identificar que te has perdido una coma.
Por lo tanto, es importante prestar atención a
la sintaxis y asegurarse de que no se pierda ninguna de esas comas.
Volverá a morderte en el momento equivocado.
Así que la siguiente tarea,
que voy a configurar es WatchTask.
Así que digo «Watch», ¿y qué quiero ver?
Quiero ver estos archivos, que es CSS/*.SCSS.
Así que este es el archivo SCSS que quiero ver.
Todos los archivos SCSS en mi carpeta CSS.
Si alguno de ellos se modifica,
entonces la tarea correspondiente que voy a ejecutar es, SASS.
La tarea SASS que ya configuré anteriormente.
Entonces, con esto, configuré mi WatchTask,
para vigilar los archivos SCSS y luego
convertirlos automáticamente invocando el SASS.
Ahora, con WatchTask, en realidad puedo vigilar varios archivos,
y luego invocar automáticamente las tareas correspondientes para esos archivos.
Entonces, por ejemplo, puedo vigilar
mis archivos JavaScript y luego hacer sugerencias JS automáticamente,
cuando mis archivos cambian.
O para hacer identificación y así sucesivamente.
Ahora, el siguiente que voy a configurar es BrowserSync.
De nuevo, no olvide la coma después de WatchTask
y, a continuación, escriba BrowserSync.
Diría que BrowserSync aquí y luego para BrowserSync,
diría que configure una tarea dentro.
Ahora, esta es la sintaxis que usamos para poner
la configuración dentro de nuestro archivo gruñido.
Así que dice BrowserSync dev.
Ahora, si me preguntas por qué,
solo necesitamos leer la documentación,
para cada uno de esos plug-ins y luego averiguar cómo configurar esos plug-ins.
Por lo tanto, ya he leído la documentación y he descubierto
alguna configuración básica para cada una de estas tareas, así que es por eso que solo las estoy escribiendo.
Obviamente, si desea más flexibilidad,
puede que desee leer la documentación correspondiente y luego averiguar
otras formas de configurar estas tareas.
Mi configuración aquí es solo una forma de abordar o resolver los problemas.
Así que aquí especifico los BSFiles, por
lo que este archivo especifica qué archivos deben ser observados
por mi BrowserSync y luego cuando cualquiera de estos archivos cambie,
entonces mi BrowserSync hará que el navegador se vuelva a cargar.
Así que voy a ver todos los archivos en mi carpeta CSS,
archivos HTML en mi carpeta de proyecto,
y luego todos mis archivos JavaScript en la carpeta JS.
Por lo tanto, con esto he configurado todos aquellos archivos en los que voy a vigilar,
y luego automáticamente causar una recarga de mi página cuando sea necesario.
Y luego, la siguiente configuración que necesito
hacer es algunas opciones más, para mi BrowserSync.
Entonces, las opciones que voy a especificar son,
watchTask true, lo que significa que hay un WatchTask en ejecución,
y el directorio base para mi servidor.
Así que digo BaseDir,
y luego especifico, barra de puntos.
Entonces, el directorio actual,
como mi directorio base.
Entonces, con estos cambios,
permítanme guardar los cambios en mi archivo gruñido,
y luego iré abajo y luego configuraré otra tarea gruñida, aquí llamada predeterminada.
Por lo tanto, especificaría la tarea como predeterminada.
Para esta tarea predeterminada, ¿qué debo hacer?
Necesito ejecutar
BrowserSync y también la segunda tarea que voy a hacer es ver.
Tendré que hacer la tarea BrowserSync primero y luego WatchTask más tarde.
Porque la tarea BrowserSync comenzará a servir mi servidor.
Si hago la tarea WatchTask primero y la tarea BrowserSync más tarde,
WatchTask básicamente,
detendrá todo y luego todas las tareas restantes detrás de eso no se ejecutarán.
Por lo tanto, si está utilizando WatchTask,
hágalo como último en la secuencia que especifique en estos corchetes.
Con esto, mi proyecto ahora está configurado,
para vigilar mis archivos SASS y servirlo siempre que sea necesario.
Así que, esto completa mi expediente de gruñidos,
volvamos a nuestra terminal.
Volviendo a mi terminal,
he abierto otra pestaña y luego en esta pestaña,
voy a ejecutar la tarea gruñido,
que también mantendrá mi BrowserSync en ejecución y servirá
archivos y volverá a cargar automáticamente la página web,
si alguno de esos archivos cambia.
Entonces, si configura una tarea como tarea predeterminada como lo hicimos en el ejercicio,
entonces en el símbolo del sistema,
solo necesito escribir gruñido y luego ejecutará automáticamente la tarea predeterminada.
Una vez que mis tareas gruñidas comienzan a ejecutarse,
puede ver que ha iniciado BrowserSync y está sirviendo
los archivos y también está ejecutando WatchTask,
que está esperando que cualquier cambio ejecute automáticamente la tarea SCSS.
Para demostrarle cómo se activará la tarea SCSS,
cada vez que hago cambios en mi archivo Styles.scss,
así que traje el archivo Styles.scss,
y simplemente voy a guardar este archivo.
Y luego notará que inmediatamente,
en el lado izquierdo, se invoca la tarea SASS y se ejecuta y luego se vuelve a compilar y esto
también hará que el archivo Styles.scss se cambie, después de ser recompilado.
Entonces esto activará BrowserSync para volver a cargar automáticamente mi página web.
Con esto, completamos nuestro ejercicio de gruñido primera parte.
Este es un buen momento para guardar sus archivos, en
el repositorio de Git con el mensaje Grunt parte uno.