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

1. GRUNT.JS
JAVASCRIPT TASK RUNNER
AUTOMATIZACIÓN DE TAREAS

2. Andrés Lozada Mosto
@alfathenus @alfathenus

3. AGENDA
¿Qué es Grunt.JS?
Mi asistente personal
Un poco de código
Competidores
Un paso mas adelante
Cierre

4. ¿QUÉ ES GRUNT?

5. “Grunt.JS es una herramienta que nos
ayuda automatizar tareas repetitivas del
desarrollo de software.
”

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. CONCEPTOS
Continuous Integration
Continous Deployment
TDD
Code checking
Optimization

8. NUESTRO ASISTENTE PERSONAL

9. “Es el monito del servidor que nos falicita
la vida.
”

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. UN POCO DE CÓDIGO

12. REQUISITOS
+ CLI Grunt.js

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. 3) Creamos el archivos Gruntfile.json

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. Instalando dependencias/tasks
npm install grunt­contrib­uglify ­­save­dev
Siempre se agregan en devDependencies del package.json

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. COMPENTENCIAS

20. UN PASO HACIA ADELANTE

22. CONSULTAS