GRUNT

¿Que es Grunt?

Es un corredor de tareas desarrollado en Javascript con Node.js.

¿Que podemos hacer?

  • Automaticamente concatena y minifica CSS, JS, increiblemente tambien podria generar sprites y optimizar imagenes.
  • Uso de motores de plantilla*
  • Escribir y correr pruebas unitarias
  • auto generar Iconos
  • correr preprocesadores (sass, less, coffeescript, etc.)
  • Verificar problemas (jshint, csslint, scsslint)
  • Generar diferentes salidas dependiendo de los ambientes (development, deploy, etc.)
  • muchas otras

Motores de plantilla soportados

La respuesta en tan solo dos palabras sería: Para Automatizar!.


Cuanto menos trabajo tengas que hacer cuando realizas tareas repetitivas como: minificación, compilación, validación de sintaxis, pruebas unitarias, observar cambios de tus archivos, concatenación de archivos, copiado de archivos de una ruta a otra, borrado de archivos, generar documentación, crear sprites, etc, tu trabajo será más fácil y rápido de realizar.

¿POR QUÉ UTILIZAR UN CORREDOR DE TAREAS?

Otra alternativa

¿Como instalar grunt?

  • Instalamos node.js http://nodejs.org/ 
  • En la terminal colocamos
     
  • Si no instala colocamos 
     
npm install -g grunt-cli
sudo npm install -g grunt-cli

Nuestro primer proyecto

 

  • Concatenar JS y CSS
  • Minificar JS y CSS
  • Ofuscar JS
  • Comprimir imagenes
  • Automatizar el proceso

Tareas deseadas

Buscar plugins

http://gruntjs.com/plugins

Instalación de los plugins

sudo npm install grunt-contrib-concat --save-dev
sudo npm install grunt-contrib-uglify --save-dev
sudo npm install grunt-contrib-watch --save-dev

Gruntfile.js

module.exports = function(grunt) {
  // este método que nos da Grunt es para pasarle las configuraciones 
  //a los paquetes que usemos
  grunt.initConfig({
    concat: {
      all: {
        src: "./scripts/**/*.js",
        dest: "./distribucion/todos.js"
      },
    uglify: {
      all: {
        src: "./distribucion/todos.js",
        dest: './distribucion/todos.min.js'
      }
  });
 
  // registramos las tareas (plugins) desde npm en Grunt
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
 
  // registramos las tareas que se pueden ejecutar y el orden
  grunt.registerTask("default", [ "concat", "uglify" ]);
  grunt.registerTask("dist", [ "default" ]);
};

Package.json

{
  "name": "nombre",
  "version": "0.0.1",
  "dependencies": {
 
  }
}
npm install grunt --save-dev
{
  "name": "nombre",
  "version": "0.0.1",
  "dependencies": {
 
  },
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

VEAMOS EL EJEMPLO