Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GruntJS

387 views

Published on

Basic of GruntJS tool.
Presentation for NodeJS Buenos Aire Meetup. March 2015.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GruntJS

  1. 1. GRUNT.JS JAVASCRIPT TASK RUNNER AUTOMATIZACIÓN DE TAREAS
  2. 2. Andrés Lozada Mosto @alfathenus @alfathenus
  3. 3. AGENDA ¿Qué es Grunt.JS? Mi asistente personal Un poco de código Competidores Un paso mas adelante Cierre
  4. 4. ¿QUÉ ES GRUNT?
  5. 5. “Grunt.JS es una herramienta que nos ayuda automatizar tareas repetitivas del desarrollo de software. ”
  6. 6. QUE NOS PERMITE AUTOMATIZAR? Ejecución de test Preprosesadores de CSS Compilación de templates Minificación y concatenación Deployment Validación estática de código Optimización de imágenes Vicularnos con otras techs Mucho más...
  7. 7. CONCEPTOS Continuous Integration Continous Deployment TDD Code checking Optimization
  8. 8. NUESTRO ASISTENTE PERSONAL
  9. 9. “Es el monito del servidor que nos falicita la vida. ”
  10. 10. Desarrollo Build Deploy Scaffold de proyectos Compilación Versionado HTMLHint Ejecución de test Commit/tags JSHint Code Coverage Copiado de archivos Auto update del browser CSS/JS minificación/concatenación
  11. 11. UN POCO DE CÓDIGO
  12. 12. REQUISITOS + CLI Grunt.js
  13. 13. 1) Instalando el CLI de Grunt.js npm install ­g grunt­cli 2) Instalando Grunt en el proyecto npm install grunt ­­save­dev y veremos algo así en el package.json
  14. 14. 3) Creamos el archivos Gruntfile.json
  15. 15. module.exports = function(grunt) {       // Configuracion del proyecto.       grunt.initConfig({         pkg: grunt.file.readJSON('package.json'),         /*[task]: {             [options]: {},             [target]: {}         }*/         uglify: {           options: {             banner: '/*! Banner para los archivos */n'           },           build: {             src: 'src/main.js',             dest: 'build/main.min.js'           }         }       });       // Cargamos las tareas de los plugins.       grunt.loadNpmTasks('grunt­contrib­uglify');       // Definicion de las tareas.       grunt.registerTask('default', ['uglify']);
  16. 16. Instalando dependencias/tasks npm install grunt­contrib­uglify ­­save­dev Siempre se agregan en devDependencies del package.json
  17. 17. OTROS PLUGINS Contrib (oficiales) contrib-clean contrib-uglify contrib-copy contrib-jshint Comunidad Karma load-config shell mocha-test ... y muchos más (+4400) ...
  18. 18. COMPENTENCIAS
  19. 19. UN PASO HACIA ADELANTE
  20. 20. CONSULTAS

×