JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

Grunt Js

Automatizador de tareas

Usado para minificación, compilación, pruebas unitarias, “código limpio”, etc.
Después de configurarlo, puedes hacer la mayor parte de ese trabajo con cero esfuerzo.

Acceder a web oficial grunt

Instalación

Requisitos: es necesario tener previamente instalado NodeJs.
Para ello hay que instalar el paquete grub-cli
npm -g install grub-cli

Necesitamos instalar grub y sus dependencias.

  1. crear una carpeta miProyecto
  2. crear un archivo "package.json"
  3. Definimos varios parámetros para nuestra aplicación como el nombre, la versión y la lista de dependencias que queremos para grunt.
    Las vs y dependencias podemos verlas en la página oficial de grunt, sección plugins
    • grunt-contrib-jshint: usado para análisis de código
    • grunt-contrib-concat: para mezclar varios archivos en uno
    • grunt-contrib-uglify: reduce el tamaño de nuestros archivos Javascript, eliminando espacios innecesarios, y reduciendo el tamaño de los nombres de las variables
    • grunt-shell: para ejecutar comandos en shell
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
       {
          "name": "miProyecto",
          "version": "0.1.0",
          "devDependencies":{
              "grunt": "~0.4.5",
              "grunt-contrib-jshint": "~0.10.0",
              "grunt-contrib-concat": "~0.5.0",
              "grunt-contrib-uglify": "~0.6.0",
              "grunt-shell": "~1.1.1"
          }
      }
      
    
  4. para instalarlo, dentro de la carpeta miProyecto
  5. npm install --save-dev
  6. comprobar que está instalado
  7. grub --version
    Dentro del proyecto, veremos que se nos ha creado una carpeta llamada node_modules

Corredor de tareas grunt

Ya lo tenemos instalado. ahora vamos a testear la aplicacion:

  1. Para testearla necesitamos varios scripts de prueba, los llamaremos script.js, script2.js y script3.js
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    
       var maths = maths || {};
    
      maths.suma = (function() {
          var total = 0;
    
          return {
              sumar: function(a, b){
                  var sum = a + b
                  total += sum;
                  return sum;
              },
              getTotal: function(){
                  return total;
              }
          };
      })();
    
      maths.resta = (function() {
          var total = 0;
    
          return {
              restar: function(a, b){
                  var dif = a - b
                  total += dif;
                  return dif;
              },
              getTotal: function(){
                  return total
              }
          };
      })();
      
    
    1
    2
    3
    4
    5
    6
    7
    8
    
       /* Script 2 *
     ******************************/
    
      var miscript2=function(){
          console.log("esto es del script2");  //indica por consola
      };
    
      
    
    1
    2
    3
    4
    5
    6
    7
    
       /* Script 3 *
     ******************************/
    
      var miscript3=function(){
          console.log("esto es del script3");  //indica por consola
      };
      
    
  3. Instalar el inicializador de grunt
  4. npm install -g grunt-init
  5. Crear el archivo gruntfile.js dentro de la carpeta miProyecto, donde se encuentra el paquete package.jon
  6. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    
       module.exports = function(grunt) {
          //definir las tareas
          grunt.initConfig({
              //https://www.npmjs.org/package/grunt-contrib-jshint
              jshint:{
                  all:['*.js']
              },
              //https://www.npmjs.org/package/grunt-contrib-concat
              concat:{
                  dist: {
                      src:['script.js','script2.js','script3.js'],
                      dest: 'unidos.js'
                  }
              },
              //https://www.npmjs.org/package/grunt-contrib-uglify
              uglify:{
                  dist:{
                      src: 'unidos.js',
                      dest: 'build/unidos.min.js'
                  }
              },
              //https://www.npmjs.org/package/grunt-shell  ver configuracion en Multiple commands
              //depende del so en el que lo ejecutes. yo uso linux.
              shell:{
                  multiple:{
                      command:[
                      'rm unidos.js',
                      'mkdir deploy',
                      'mv build/unidos.min.js deploy/unidos.min.js'
                      ].join('&&')
                  }
              }
          });  
          //para cargar los plugins
          grunt.loadNpmTasks('grunt-contrib-jshint');
          grunt.loadNpmTasks('grunt-contrib-concat');
          grunt.loadNpmTasks('grunt-contrib-uglify');
          grunt.loadNpmTasks('grunt-shell');
    
          //registrar los plugins a las tareas por defecto
          grunt.registerTask('default',['jshint','concat','uglify','shell']);
          
      };
      
    
  7. Desde el terminal probamos grunt
  8. grunt
    Podrás comprobar que indica las lineas que alertan de algún fallo. En este ejemplo, las lineas 8, 23 y 28 con ausencia de ; Cambia y verifica.
    Además se ha unido script.js, script2.js y script3.js en un solo archivo unidos.js. Luego, se ha usado uglify para eliminar espacios en build/unidos.min.js. Y después con shell he borrado unidos.js, creado carpeta deploy, y movido unidos.min.js a deploy.

Escribiendo grunt se ejecuta todas las tareas. Puedes ejecutar una sola tarea, por ejemplo jshint así grunt jshint

Comentarios