class: center, middle template: inverse #Workflow Moderno para Proyectos Front-end --- class: center, middle ##Grunt *Un automatizador para tareas front-end*  --- class: left, middle ##Grunt - con inferfaz 'cli' - escrito en JavaScript sobre NodeJS - agnóstico, modular, ideal para trabajos complejos - que ayuda a que tengamos menos trabajo - y seamos más eficientes --- class: left, middle ###Automatizador de tareas Mientras nos concentramos en **crear** código, Grunt se encarga de realizar por nosotros las tareas más tediosas como: - detección de errores en JS/CSS - minificación / compilación de código - concatenación de librerías JS/CSS - compresión de imágenes - creación de sprites - recarga del browser si existe algo nuevo en alguna de las tareas programadas - ... ¿? --- class: left, middle ###Pero no es nada nuevo  [Java Ant](https://git-wip-us.apache.org/repos/asf?p=ant.git;a=summary) | [Ruby Rake](http://rake.rubyforge.org/) | [Make](http://www.gnu.org/software/make/) | [CoffeeScript Cake](http://coffeescript.org/documentation/docs/cake.html) --- class: left, middle ###Tampoco el único  [Gulp](http://gulpjs.com/) | [Broccoli](https://github.com/broccolijs/broccoli) | [Mimosa](http://mimosa.io/) | [Bud](https://github.com/azer/bud) --- class: left, middle ###Qué se necesita Instalación global: - node - grunt-cli Instalación local: - grunt & plugins - package.json - gruntfile.js --- class: left, middle ###Cómo funciona ####package.json - se deja en la raíz del proyecto - especifica la metadata de los proyectos - maneja versiones de los plugins de Grunt através de npm  --- class: left, middle ####gruntfile.js - se deja en la raíz del proyecto - especifica las tareas y sus comportamiento - especifica rutinas por tareas o una rutina global  [Getting Started](http://gruntjs.com/getting-started) | [Configuring Tasks](http://gruntjs.com/configuring-tasks) | [Creating Tasks](http://gruntjs.com/creating-tasks) --- class: left, middle ####plugins |grunt-contrib-watch |Aguarda por cambios en archivos | |--------------------------|-------------------------------| |grunt-contrib-connect |Inicia un web server simple | |grunt-open |Abre browser en cierta URL | |grunt-contrib-concat |Concatena archivos | |grunt-contrib-sass |Compila SASS | |grunt-contrib-compress |Crea archivos Zip/Tar/Gz | |grunt-contrib-clean |Vacía un directorio | |grunt-imageoptim |Optimiza imagenes | |grunt-aws-s3 |Upload/Download desde AWS S3 | |grunt-text-replace |Reemplaza textos en archivos | |grunt-contrib-copy |Copia archivos | --- class: center, middle  --- class: left, middle #####watch nos cuida a todos y se encarga de que no se nos olvide nada ```javascript src/js/libs/jquery.js src/js/libs/timelinr.js src/js/functions.js src/less/inc/reset.less src/less/inc/mixins.less src/less/styles.css ```  ```javascript dist/js/libs/libs.min.js dist/js/functions.min.js dist/css/style.css ``` --- class: left, middle ####configuración ```javascript module.exports = function(grunt){ grunt.initConfig({ uglify: {/* config */}, jslint: {/* config */}, less: {/* config */}, watch: {/* config */} }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['uglify','less']); } ``` --- class: left, middle #####tarea ```javascript uglify: { options: { banner: '/* jQuery Timelinr */\n' }, build: { src: 'src/timelinr.js' dest: 'build/timelinr.min.js' } }, watch: { scripts: { files: ['src/js/*.js'], tasks: ['uglify'] } } ``` --- class: left, middle #####rutinas ```javascript grunt.registerTask('default', ['uglify','less']); grunt.registerTask('build', ['uglify','less','concat']); grunt.registerTask('test', ['uglify','jslint']); ``` --- class: left, middle correr Grunt: ```xml $ grunt ``` correr una tarea dentro de Grunt: ```xml $ grunt tareaespecifica ``` correr una configuración dentro de una tarea dentro de Grunt: ```xml $ grunt tareaespecifica:config ``` --- class: center, middle Si existen Gems y NPM, por qué no uno para el front-end? ________________________________________________________ ¯ˉ\_(ツ)_/¯ˉ --- class: center, middle ##Bower *Un package manager para la web*  --- class: left, middle Si necesitas: - instalar una librería JS - mantener una librería JS - verificar dependencias y sus versiones **Bower** hace el trabajo  --- class: left, middle **Bower** Depende de NodeJS y se instala globalmente: ```xml $ npm install -g bower ``` Luego localmente tus librerías: ```xml $ bower install jquery $ bower install timelinr ``` --- class: left, middle ###librerias $ bower search ....  --- class: left, middle O si necesitas una versión específica: ```xml $ bower install bootstrap#2.01 ``` ¡Bower se encarga de verificar si tienes las dependencias correctas!  --- class: left, middle ###bower.json - se deja en la raíz del proyecto - especifica las librerías y sus dependencias  --- class: center, middle #☺