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
lnea 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
informacin 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 produccin no se va a necesitar de gulp; hay otras
dependencias que si se necesitan en produccin como ejemplo express para
ese caso solo escribira save. Damos enter y esperamos a que se instale gulp
en el proyecto
9. Una vez instalado gulp esas dependencias deberan 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 mtodo se definen las tareas. Primer parmetro el
nombre de mi tarea, segundo las tareas que queremos que se ejecuten
antes de que se ejecute esta se puede omitir, luego una funcin que me
indique que es lo que va hacer esta tarea.
El mtodo pipe() lo que hace es tomar los datos que se estn procesandoy
pasarlos a otro modulo o a otro plugin por que las tareas se ejecuta a
travs de plugins

La anterior es la sintaxis mas bsica 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 informacin 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 accin
definida. Primer parmetro 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

dems 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 tambin se hace clic en los dems 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 lnea 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 tambin 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 extensin
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 estn dentro de los otros directorios y no solo los que estn 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 prque 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
informacin 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 estara 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