Let’s Cook with Gulp 🤘

Ok, ahora que ya saben para que sirve Gulp y cómo se utiliza, les daré una pequeña receta para hacer los proyectos más sabrosos y hermosos🙅

1. Nos aseguramos que el computador en el que estamos trabajando tenga node y npm instalado con el comando node -v y npm -v
2. Nos aseguramos que el computador en el que estamos trabajando tenga gulp instalado globalmente con el comando gulp -v
3. Crearemos la carpeta de nuestro proyecto con el archivo gulpfile.js vacío por el momento
4. Nos posicionamos desde terminal en nuestro proyecto y utilizamos el comando npm init
5. Desde terminal se nos pedirán muchos datos, solo son obligatorios name y version
6. Se creará un archivo package.json
7. La primero que hacemos es instalar gulp como dependencia de desarrollo en nuestro proyecto con el comando npm install --save-dev gulp
8. Ahora instalaremos las demás dependencias de desarrollo con el comando npm install --save-dev nombreDependencia Para Mac y Linux anteponer sudo en cada comando. Acá podemos ver todas las dependencias disponibles y la respectiva configuración de su tarea
9. Ahora instalaremos las dependencias de producción con el comando npm install --save nombreDependencia Para Mac y Linux anteponer sudo en cada comando.
10. Ahora definimos en las tareas de gulp la lógica que debe realizar, todo en nuestro archivogulpfile.js(concat, uglify, webserver, minifycss, sass, jshint etc)
11. Corremos gulp y enlazamos los archivos correspondientes desde nuestra carpeta de destino (gulp.dest()).
12. Agregamos al archivo .gitignore la carpeta node_modules generada al momento de la instalación de dependencias, para que se mantenga oculta al momento de subir mi proyecto a github.
13. Los archivos css y javascript que se linkean en los html son los que están dentro de la carpeta de destino

Algunas de las tareas más comunes en gulp

gulp-jshint: nos indicará si nuestros archivos javascript tienen errores, mostrará un informe breve en el terminal. Necesita tener instalado jshint globalmente para funcionar.

gulp-concat: creará un solo archivo css o js con toda la mezcla de
nuestros css y js propios (es el que se linkea en nuestros html).

gulp-sass: correrá sass y compilará los archivos scss

gulp-minify-css: minificará nuestro archivo css.

gulp-webserver: crea un servidor web de desarrollo que se ejecuta en el localhost puerto 8000, actualizando automáticamente los cambios que haga en mi proyecto mientras se está ejecutando gulp.

Configuración de la tarea por defecto en gulp: indicamos que al ejecutar el comando gulp en nuestro terminal, se llevarán acabo todas las tareas especificadas en el array.

Ahora….automatización ven a miiiii! 🎉🎉🎉