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-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! 🎉🎉🎉

Laboratoria Developers

Serie de posts, tutoriales y guías sobre desarrollo web 🚀 ❤️

    Alexandra Neira Quiroz

    Written by

    Laboratoria Developers

    Serie de posts, tutoriales y guías sobre desarrollo web 🚀 ❤️

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade