Flujo de trabajo Front-end básico con Gulp

Diapositivas hechas para la hangout de freecodecampers hispanos del día 21/02/2016.

Transcript

1. Juan Riquelme @juanriqgon para FreeCodeCamp/Espanol en Gitter
3. Es una «task runner tool» Ejecuta una serie de tareas programadas
4. Es un «build system» Automatiza la preparación de una aplicación web para su despliegue en producción
6. SASS, less, Stylus, PostCSS... → CSS TypeScript, CoffeScript, LiveScript... → JavaScript Jade, Handlebars, Nunjucks... → HTML Transpilar automáticamente
7. Optimizar CSS Optimizar y ofuscar JavaScript Optimizar HTML Optimizar imágenes Preparar para producción
8. Automatización de otras tareas repetitivas
10. https://nodejs.org/en/
11. $ npm install -g gulp * *
12. $ mkdir proyecto && cd proyecto
13. { "name": "nombre-proyecto-en-minusculas", "version": "0.1.0", "description": "Descripción del proyecto", "author": "Mi nombre <mi@email.com>" }
14. $ npm install --save-dev babel-preset-es2015 browser-sync gulp gulp-autoprefixer gulp-babel gulp-load-plugins gulp-sass gulp-sourcemaps gulp-uglify gulp-htmlmin gulp-util Instalamos todos los paquetes necesarios para nuestro proyecto Los paquetes a instalar varían según el proyecto
15. $ npm install
16. { "name": "nombre-proyecto-en-minusculas", "version": "0.1.0", "description": "Descripción del proyecto", "author": "Mi nombre <mi@email.com>", "devDependencies": { "nombre-paquete-1": "^6.3.13", "nombre-paquete-2": "^2.11.1", ... } }
17. $ nano gulpfile.js