CONFIGURANDO GULP EN WINDOWS PARA AUTOMATIZAR TAREAS

1. Tener instalado Node.js

2. Estar seguro de que node.js y npm esten instalados y son accesibles desde la línea de comandos,
para ello escribimos los comandos node –version y npm –version

3. Instalar gulp globalmente la primera vez

4. Para saber si se ha instalado gulp escribimos el comando:

5. Ahora abrimos nuestro proyecto desde nuestro editor favorito

6. Creamos un archivo package.json en este archivo se van a indicar la información del proyecto,
dependencias del proyecto. Para ello desde nuestra terminal de comandos nos ubicamos en la
carpeta donde estamos trabajando y escribimos:

Nos va a realizar varias preguntas, pero en este caso no vamos a entrar en ese detalle y
colocamos asi:

Con lo cual le estamos diciendo dale yes a todo

7. Ahora ya se ha creado el archivo package.json
8. Ahora procedemo a instalar gulp de manera local en este proyecto

Con esto estoy indicando que gulp es solo una dependencia de desarrollo, es decir, que en
producción no se va a necesitar de gulp; hay otras dependencias que si se necesitan en
producción como ejemplo express para ese caso solo escribiría save. Damos enter y esperamos
a que se instale gulp en el proyecto
9. Una vez instalado gulp esas dependencias deberían de aparecer en el archivo package.json

10. Ahora creamos un archivo gulpfile donde se va indicar las tareas que va a hacer gulp, porque
cada tarea debo escribirla

11. Una vez creado el archivo se debe de llamar al modulo gulp para ello escribimos en el archivo
gulpfile.js lo siguiente:
12. Ahora vamos a conocer los 4 metodos que tiene gulp y que debemos de entender:
- gulp.task() Con este método se definen las tareas. Primer parámetro el nombre de mi tarea,
segundo las tareas que queremos que se ejecuten antes de que se ejecute esta se puede
omitir, luego una función que me indique que es lo que va hacer esta tarea.
El método pipe() lo que hace es tomar los datos que se están procesandoy pasarlos a otro
modulo o a otro plugin por que las tareas se ejecuta a través de plugins

La anterior es la sintaxis mas básica de una tarea de gulp

- gulp.src(‘./scss’) Es la ruta de origen, es decir, de donde gulp va a tomar los archivos o la

información con la que va a trabajar , se indica una carpeta o un array de carpetas donde va
a buscar contenido
- gulp.dest(‘./css’) Es la ruta de destino donde va a dejar los contenidos una vez procesado
con las tareas indicadas. El punto significa el directorio actual
- gulp.watch() Lo que hace es estar supervisando un directorio constantemente y ejecutando
tareas cuando suceda alguna acción definida. Primer parámetro es el directorio donde va a
buscar, segundo un array de tareas que va a realizar

Tambien se puede hacer de esta manera

y en la terminal solo escribimos gulp

13. Luego de escrita la tarea escribimos en terminal

COMPILANDO SASS CON GULP

1. Al momento de instalar gulp podemos dejar un espacio y colocar los demás plugins que
deseamos esto con el fin de no tener que estar instalado a cada momento
2. Ahora ya deben de estar en el archivo package.json

3. Ahora escribimo en gulpfile

4. Ahora

5. Tambien podemos pasarle dos opciones el estilo de salida

En la terminal escribimos

SINCRONIZAR Y RECARGAR EL NAVEGADOR CON BROWSERSYNC

BrowserSync es un modulo de node.js que nos permite sincronizar navegadores de esta

manera podemos ver el resultado de nuestro navegador y sincronizarlo con varios ejemplo
si haces un clic en un navegador también se hace clic en los demás navegadores que tengas
abierto con la misma url del proyecto . Algo muy útil en el desarrollo y testeo.

1. Instalamos el modulo de manera global

Ahora comprobamos si esta instalado para ello escribimos el comando

2. Ahora debemos de instalar el modulo de manera local en el proyecto que estamos
trabajando

en caso no este instalado.

Ahora ya aparece en nuestro archivo package.json

Browsersync se puede integrar con herramientas tipo gulp, grunt para automatizar
tareas pero no lo vemos en esta parte solo veremos browserSync por línea de comandos
desde la terminal
3. Ahora creamos un servidor desde la terminal solo estamos inspeccionando el css

Ahora vemos algo que nos indica en la terminal

4. Si queremos que también nos inspeccione el html haremos lo siguiente:

Si queremo todo haremos lo siguiente:

 Le estamos diciendo que en la carpeta actual me busque todos los archivos con
cualquier extensión

5. Como trabajar browserSync con php y no me cambie de localhost

lo que quiero ahora es que cuando creo el proxy me examine todos los archivos
incluidos los que están dentro de los otros directorios y no solo los que están en el
directorio

la forma es: browser-sync start --proxy direciondelproxylocal --files " . / * * / * . * " de esta
forma cualquier archivo es examinado, no olvides que tiene que estar la etiqueta body
dentro de cada archivo para la inyeccion de el script NOTA: tienes que quitarles los
espacion a esta porcion de codigo " * / * * / * . * " se los puse pórque youtube no lo
mostraba todo junto

Recargando navegador con BrowserSync y gulp

Se crea un archivo package.json

Y ahora en el package.json

Ahora creamos gulpfile.js

Si queremos compartirlo podemos borrar la carpeta nodemodules y en la pc solo

escribimos npm install y lo que hace es leer el package.json e instalarlo

En el archivo gulpfile.js
 En la terminal escribimos

compilar Jade/Pug con Gulp

1. Ahora abrimos nuestro proyecto desde nuestro editor favorito
2. Creamos un archivo package.json en este archivo se van a indicar la información del
proyecto, dependencias del proyecto. Para ello desde nuestra terminal de comandos nos
ubicamos en la carpeta donde estamos trabajando y escribimos:

Nos va a realizar varias preguntas, pero en este caso no vamos a entrar en ese detalle y
colocamos asi:

Con lo cual le estamos diciendo dale yes a todo

3. Ahora ya se ha creado el archivo package.json
 Ahora procedemo a instalar gulp de manera local en este proyecto

Ahora procedemos a instalar gulp-pug

Ahora creamos un archivo gulpfile donde se va indicar las tareas que va a hacer gulp, porque cada
tarea debo escribirla

Una vez creado el archivo se debe escribir:

Y en la consola escribimos:
Si queremos que se vea bien escribimos

Hacemos un watch

Y en la consola escribimos
Si tengo una carpeta y no quiero compilarlos hare lo siguiente

Con los ** le estaría diciendo vigila todos los archivos a cualquier nivel
Pagina de Plugins
https://frontendlabs.io/1752--gulp-js-plugins-como-configurar-tareas
https://github.com/Pestov/essential-gulp-plugins
https://abalozz.es/automatiza-tareas-con-gulp/
http://blog.escuelaweb.net/automatizar-tareas-en-frontend-usando-gulp/
https://abalozz.es/actualiza-el-navegador-al-guardar-cambios-con-browser-sync/
https://www.npmjs.com/package/gulp-pug
https://dazzet.co/tutorial-de-gulp/
http://zalospace.com/tutorials/expressjs/2-compilando-con-gulp