Ahora que hemos concedido suficiente,
es hora de Gulp.
Intentaremos realizar el mismo tipo de
tareas que hemos realizado con Scripts NPM y Grunt,
pero ahora intentaremos hacer lo mismo usando Gulp y Gulp Plug-ins.
Para empezar, primero instalemos Gulp como un módulo global.
Entonces, para hacer eso, en el símbolo del sistema,
escriba npm -g install gulp,
esto instalará Gulp como un módulo global y
lo hará disponible para su uso en la línea de comandos.
Después de completar esto,
el siguiente paso es instalar Gulp localmente en nuestro proyecto.
Entonces, para hacer eso, en el símbolo del sistema,
escriba npm install gulp —save-dev.
Una vez que hayamos completado estos dos,
es hora de seguir adelante y configurar nuestras tareas de Gulp.
Antes de hacer eso, nuestro siguiente paso,
instalaremos el plug-in Gulp Sass para que podamos
configurar el Sass para que vea como tarea de conversión en nuestro archivo Gulp.
Entonces, para seguir adelante y hacer eso,
escriba npm install
gulp sass —save-dev.
También mientras estamos en ello,
también podríamos instalar la tarea Browser Sync Gulp Task,
para que podamos configurar ambos uno tras otro.
Por lo tanto, instalaré, npm install browser-sync —save-dev.
Una vez que estos dos están instalados,
vamos a seguir adelante y crear nuestro archivo Gulp y luego configurar nuestras tareas Gulp aquí.
Vamos a nuestra carpeta de proyecto,
vamos a crear un nuevo archivo y luego el nombre gulpfile.js,
y en este archivo, vamos a configurar nuestras Tareas Gulp.
Entonces, una vez que gulpfile.js esté listo,
configure bien las tareas de Gulp aquí primero comenzando
con 'use strict' y luego var gulp.
Por lo tanto, necesitamos requerir los módulos de nodo gulp,
y también mientras estamos en ello,
necesitaremos el módulo de nodo sass.
Como mencioné en el ejercicio anterior,
será más claro para usted por qué el código está escrito así,
una vez que entienda más acerca de los módulos de nodo en un curso posterior.
BrowserSync, así que lo que hemos hecho es incluir los
módulos de nodo Gulp Contrast y BowserSync en nuestro archivo Gulp.
Y una vez que lo hayas hecho,
es hora de configurar nuestras Tareas Gulp.
Como aprendimos anteriormente,
Gulp es un código basado en la forma de configurar
tareas a diferencia de Grunt que se basa más en la configuración de las tareas.
Entonces, en el caso de Gulp,
el bebé configurará nuestras tareas para escribir
gulp.task y luego vamos a configurar un nombre de tarea 'sass',
y luego para esta tarea,
vamos a configurar esto como una función,
y así es como se prepara el código.
Por lo tanto, la función Gulp Tasks Sass y aquí,
estamos configurando las tareas de Gulp,
así que escribiremos return gulp.src ('. /css/ *.scss') Como aprendimos,
Gulp es un código basado en herramientas sobre la configuración.
Por lo tanto, prepararemos esta tarea como tal.
Por lo tanto, verá que hemos especificado Gulp fuente pipe sass en,
y luego aquí, error.
Por lo tanto, si ocurre un error,
usaremos la forma Sass para registrar el error y luego canalizarlo
a través de gulp.dest ('. /css '), y que
completa la configuración de las tareas de Gulp Sass.
Debes estar preguntándote por qué escribimos el código así.
Dice fuente de trago y luego especifica algo allí,
y luego el siguiente dice tubería y luego el siguiente dice tubería.
Vamos a entender la forma de Gulp de hacer las cosas con un poco más de detalle.
Para ayudar a explicar por qué configuramos Tareas como esa,
tengo una explicación de lo que llamamos Gulp Streams.
La forma en que funciona Gulp es como tomar un conjunto de archivos y especificar el conjunto de
archivos diciendo fuente de gulp como hicimos con las tareas de Sass allí.
Así que aquí, esta es la función que toma los archivos.
Incluso podría especificar los archivos usando los patrones de globbing que aprendimos en Grunt,
y luego crea un flujo de objetos que representa estos archivos.
Ahora, una vez que se crea la secuencia,
entonces la secuencia se puede canalizar a través de un conjunto de
funciones una tras otra para transformar estos archivos.
Y luego, finalmente, los archivos transformados resultantes se pueden poner en una ubicación de destino.
Entonces es por eso que especificamos la fuente Gulp,
luego especificamos la tubería.
Entonces, la tubería permite que la corriente se canalice a través de una función,
y así, es por eso que dijimos tubería de punto,
y luego dijimos trago.
Y luego dijimos sass por error.
Y luego el siguiente dice Pipe Gulp Dest.
Por lo tanto, el dest gulp especifica el destino de los archivos que se han procesado.
Entonces, así es como se especifica una tarea típica en gulp porque pero gulp opera en flujos.
Por lo tanto, sus archivos de flujo a través de las tuberías hasta que
se transfieran y luego se depositarán en el destino especificado.
Por lo tanto, verá una estructura similar para muchas de las tareas de trago que
configuraríamos en este ejercicio y en el siguiente ejercicio.
Ahora que ha entendido un poco sobre cómo funciona gulp con flujos y cómo
la tarea gulp usa la tubería para procesar archivos a través de un conjunto de funciones,
y le queda más claro por qué configuramos esta tarea sass como se ve en este código aquí.
La siguiente tarea que vamos a configurar se llama gulp,
y vamos a configurar esta tarea como sass watch.
Por lo tanto, esta es una tarea de vigilancia que vamos a configurar,
y luego usted especificaría la función.
Y así, aquí,
la tarea de ver el trago sass,
lo que hacemos es especificar los archivos que vamos a estar viendo.
Por lo tanto, usamos la tarea de seguimiento de trago para ver el archivo.
Por lo tanto, el reloj ya está integrado en trago.
Por lo tanto, tomará trago de reloj y luego especificamos los archivos allí*.SCSS.
Por lo tanto, como puede ver, el reloj de trago observará
estos archivos y luego, cuando se produzcan cambios en estos archivos,
ejecutará esa tarea sass,
que hemos especificado anteriormente.
Por lo tanto, así es como se configura esa tarea de reloj sass.
Ahora que hemos hecho estos dos,
vamos a configurar esa tarea de sincronización del navegador a continuación.
Por lo tanto, cierre eso con el punto y coma y luego la
siguiente tarea que configuraremos es la tarea de sincronización del navegador.
Por lo tanto, especificaré la tarea de sincronización del navegador allí.
Y luego para la tarea de sincronización del navegador,
especificaré esa función.
Nuevamente, tenga en cuenta la estructura en la que escribimos el código, la
tarea de trago y luego especifique algo que siguió pero con una función.
Ahora de nuevo, como dije,
aprendemos módulos de nodo en el último curso de esta especialización,
será más claro para usted por qué no los módulos escritos con esta estructura,
y por qué las funciones están escritas así.
Por lo tanto, decimos trago sincronización del navegador de tareas.
Aquí, voy a definir una variable,
una variable de JavaScript llamada archivos,
que no es más que en matriz,
y que dentro de esa matriz de archivos especificaría todos los archivos que
si se modificara la sincronización del navegador necesita
para causar la recarga o el archivo.
Por lo tanto, los archivos html, los archivos CSS en la carpeta CSS,
y luego de manera similar también voy a ver los archivos de imagen,
y los archivos JavaScript.
Todos estos archivos si alguno de ellos cambia.
Entonces, después de esto, configuraré la sincronización del navegador aquí.
Por lo tanto, voy a decir sincronización del navegador.
Ya hemos definido esta variable llamada sincronización del navegador anteriormente.
Por lo tanto, tenemos que inicializar la sincronización del navegador
, y así, el primer parámetro para
eso son los archivos que necesitarán ser observados,
y luego el segundo parámetro especifica las opciones que estamos dando al navegador.
Por lo tanto, la opción que estoy especificando es para el servidor.
Especificaré el directorio base como el directorio actual,
y luego eso completa la especificación de la tarea de sincronización del navegador.
Por lo tanto, con esto, hemos completado la especificación de la tarea de sincronización del navegador aquí.
Por lo tanto, se puede ver que cómo configuramos la tarea de sincronización del navegador,
especificamos los archivos y luego guardar la
sincronización del navegador en él y proporcionar los archivos como el primer parámetro.
El segundo parámetro son las opciones para el complemento de sincronización del navegador.
Luego, finalmente,
programaremos o configuraremos la tarea llamada predeterminada.
Al igual que yo tengo la tarea predeterminada en Grunt,
también podemos tener una tarea predeterminada similar definida para gulp.
Entonces, aquí decimos trago tarea sincronización predeterminada del navegador,
y luego especificar la función.
Y dentro de allí especificaremos el comienzo del trago.
Por lo tanto, esto especifica que debería comenzar
esta otra tarea que sass reloj tarea.La tarea de reloj sass tiene que ser iniciado.
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.
Por lo tanto, esta es la sintaxis para especificar eso en trago.
Por lo tanto, con esto, hemos configurado todo lo que necesitamos en el archivo gulp.
Así que, volviendo atrás,
hay pasos que hicimos.
Primero usamos require incluir todos sus plugins gulp allí,
luego configuramos la tarea sass,
y luego especificamos la tarea sass watch.
Aquí es donde usamos el reloj trago que está disponible para nosotros como de trago.
Luego especificamos la tarea de sincronización del navegador y luego finalmente
reprogramamos la tarea predeterminada con el navegador Sync y el trago comienza con sass watch.
Ahora, veamos los cambios,
y luego seguiremos adelante y ejecutaremos el archivo gulp add,
y el indicador de tipo gulp.
Verá que gulp se inicia con la sincronización del navegador y la tarea de reloj sass se inicia,
y luego la sincronización del navegador comenzará a servir los archivos.
Si ve su sitio web utilizando un navegador,
podrá ver el sitio web que se está sirviendo en el navegador.
Permítaseme también ilustrar el funcionamiento de la tarea de vigilancia.
Entonces, levantaré el style.css y
solo intentaré guardar el cambio y notarás que en el lado izquierdo,
la tarea sass se invoca inmediatamente y
volverá a compilar el archivo style.scss en los archivos CSS.
Y entonces ese navegador se recargará en este punto.
Con esto completamos la primera parte del ejercicio trago.
En la segunda parte, prepararemos la carpeta de distribución.
Este es un buen momento para que hagas un git-commit con el mensaje Gulp parte 1.