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

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
• ... ¿?

Pero no es nada nuevo

Java Ant | Ruby Rake | Make | CoffeeScript Cake

Tampoco el único

Gulp | Broccoli | Mimosa | Bud

Qué se necesita

Instalación global:

• node
• grunt-cli

Instalación local:

• grunt & plugins
• package.json
• gruntfile.js

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

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 | Configuring Tasks | Creating Tasks

plugins

watch

nos cuida a todos y se encarga de que no se nos olvide nada

    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

    dist/js/libs/libs.min.js
    dist/js/functions.min.js
    dist/css/style.css

configuración

    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']);
    }

tarea

  uglify: {
    options: {
      banner: '/* jQuery Timelinr */\n'
    }, 
    build: {
      src: 'src/timelinr.js'
      dest: 'build/timelinr.min.js'
    }
  },
  watch: {
    scripts: {
      files: ['src/js/*.js'],
      tasks: ['uglify']
    }
  }

rutinas

  grunt.registerTask('default', ['uglify','less']);
  grunt.registerTask('build', ['uglify','less','concat']);
  grunt.registerTask('test', ['uglify','jslint']);

correr Grunt:

  $ grunt

correr una tarea dentro de Grunt:

    $ grunt tareaespecifica

correr una configuración dentro de una tarea dentro de Grunt:

    $ grunt tareaespecifica:config

Si necesitas:

• instalar una librería JS
• mantener una librería JS
• verificar dependencias y sus versiones

Bower hace el trabajo

Bower Depende de NodeJS y se instala globalmente:

  $ npm install -g bower

Luego localmente tus librerías:

  $ bower install jquery
  $ bower install timelinr

librerias

$ bower search ....

O si necesitas una versión específica:

  $ bower install bootstrap#2.01

¡Bower se encarga de verificar si tienes las dependencias correctas!

bower.json

• se deja en la raíz del proyecto
• especifica las librerías y sus dependencias