Paquete Grunt

Grunt es una herramienta que sirve para automatizar las tareas de nuestros proyectos.
La idea es que todas esas tareas rutinarias que debemos hacer en nuestros proyectos Grunt las haga por nosotros. Entre las tareas mas comunes están:

• Concatenar archivos
• Comprimir archivos
• Optimizar imágenes.
• Compilación
• Comprobacion de errores

Funcionamiento del paquete:

• Instalar el cliente de grunt en el shell en modo global

npm install –g grunt-cli

 

Instalará la herramienta de línea de comando grunt en la ruta de su sistema y permitirá que se ejecute desde cualquier lugar de su sistema. No se instala Grunt, solo nos permite ejecutar la versión del proyecto local de Grunt desde la línea de comandos.

Si hay una instalación de Grunt local, la CLI carga esta versión de la librería de Grunt, aplica la configuración indicada en el Gruntfile, y ejecuta cualquier tarea solicitada.

 

• Despues incluir grunt en modo local a nuestro proyecto de alguna de la siguientes maneras: 
• 
  

Como dependencias de produccion:

npm install grunt –save

"author": "",

"license": "ISC",

"devDependencies": {},

"dependencies": {

"grunt": "^1.1.0" 

}

Como dependencias de desarrollo:

npm install grunt --save-dev

 

"author": "",

"license": "ISC",

"devDependencies": {

"grunt": "^1.1.0"

},

"dependencies": {}

}

 

Tenemos cuatro plugins para automatizar varios tipos de tareas:

• jshint: Para los errores del codigo, tenemos el paquete grunt-contrib-jshint.
•  uglify: Minimiza o compime nuestros ficheros extensos a una version de produccion, paquete grunt-contrib-uglify.
• concat: Concatena varios ficheros fuente, paquete grunt-contrib-concat.
• mocha-test: Realizamos las pruebas unitarias,  paquete grunt-mocha-test.

 Despues incluir los plugins de forma a nuestro proyecto de dos maneras:

 

• Como dependencias de desarrollo:

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-mocha-test --save-dev

• Como dependencias de produccion:

npm install grunt-contrib-jshint

npm install grunt-contrib-uglify

npm install grunt-contrib-concat

npm install grunt-mocha-test

Despues creamos un archivo llamado Gruntfile.js

module.exports = function(grunt){

//configuracion de grunt

    grunt.initConfig({

    //Configuraciones de los plugins

    plugin1

    plugin2

     …..

    pluginN

//Carga de los plugins a usar

grunt.loadNpmTasks(plugin1);

grunt.loadNpmTasks(plugin2);

…

grunt.loadNpmTasks(pluginN);

//tarea por defecto

grunt.registerTask(nombreTarea,'[‘plugin1,plugin2,…pluginN’]);

};

Pruebas unitarias con grunt

Instalamos el siguiente paquete:

•  npm install mocha
• npm install grunt-mocha-test --save-dev

Gruntfile.js:

Module.exports = function(grunt){
grunt.initConfig({
//Configuracion de una tarea de mocha
mochaTest: {
test: {
options: {
reporter : 'spec',
quiet: false
},
src:'persona.js'
}
}
});
grunt.loadNpmTasks('grunt-mocha-test');
grunt.registerTask('unitarias','mochaTest');
};

 Creamos el archivo persona.js:

function persona() {
this.nombre;
this.primerApellido;
this.segundoApellido;
}
persona.prototype.setNombre = function (nombre) {
this.nombre = nombre;
}
persona.prototype.setPrimerApellido = function (primerApellido) {
this.primerApellido = primerApellido;
}
persona.prototype.setSegundoApellido = function (segundoApellido) {
this.segundoApellido = segundoApellido;
}
persona.prototype.getNombre = function () {
return this.nombre;
}
persona.prototype.getPrimerApellido = function () {
return this.primerApellido;
}
persona.prototype.getSegundoApellido = function () {
return this.segundoApellido;
}
var assert = require('assert')
var p = new persona();
p.setNombre('Juan');
p.setPrimerApellido('Garcia');
p.setSegundoApellido('Lopez');


it('Correcto el nombre', function () {
assert.equal('Juan', p.getNombre());
});
it('Correcto el primerApellido', function () {
assert.equal('Garcia', p.getPrimerApellido());
});
it('Correcto el segundoApellido', function () {
assert.equal('Lopez', p.getSegundoApellido());
});

 

Arrancamos las pruebas:

grunt unitarias

 

Salida:

 

  √ Correcto el nombre

  √ Correcto el primerApellido

  √ Correcto el segundoApellido

  3 passing (13ms)

Done.  

Comprobacion de errores

Testeo de errores sintacticos o semanticos en el codigo.

Instalar los siguientes paquetes:

• npm install -g grunt-cli
• npm install grunt --save-dev
• npm install -g jshint  //Instalacion en modo global
• npm install grunt-contrib-jshint --save-dev //Instalacion en modo de desarrollo
  

Gruntfile.js:

module.exports = function(grunt){
grunt.initConfig({
//Configuramos los errores del codigo
jshint: {
files : {
src: ['persona.js']
},
options: {
globals: {
jQuery: true
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('errores','jshint');
}; 

 

Dentro la carpeta src insertamos los ficheros para comprobar los errores

 

Arrancamos las pruebas:

grunt errores

Salida:

>> 1 file lint free.

Done. 

Compresion de ficheros

jQuery se distribuye en dos variantes:

• La extendida
• La version comprimida para los entornos de produccion que suelen terminar en min.js

La comprension sobre los ficheros fuente consiste en:

• Eliminacion de todos los espacios,los saltos de linea, tabuladores y comentarios.
• Recorte del nombre de las variables al minimo numero de caracteres posible.
  

Instalar los siguientes paquetes:

• npm install -g grunt-cli
• npm install grunt --save-dev
• npm install grunt-contrib-uglify --save-dev

 

Gruntfile.js:

module.exports = function(grunt){
grunt.initConfig({
//Configuramos una tarea de compresion de ficheros
uglify: {
build: {
src:'persona.js',
dest: 'persona.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('compresion','uglify');
};

 

Arrancar grunt:

grunt compresion

 

Salida:

>> 1 file created 1.12 kB → 867 B

Done.

La compresión de ficheros ha creado el archivo persona.min.js
 

Concatenacion de ficheros con grunt

Vamos a suponer que tenemos dos ficheros en nuestro proyecto llamados persona1.js y persona2.js y los vamos a juntar en personasJuntas.js.

Instalamos los siguientes paquetes:

• npm install -g grunt-cli
• npm install grunt --save-dev
• npm install grunt-contrib-concat --save-dev
  

GruntFile.js:

module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: ['persona.js','persona1.js'],
dest: 'personasJuntas.js',
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('concatenacion','concat');
};

 

Arrancar grunt:

grunt concatenacion

 

Salida:

Done.

La concatenación de ficheros ha creado el archivo personasJuntas.js. 

Automatización de las todas las tareas anteriores

Instalar los siguientes paquetes:

• npm install –g grunt-cli
• npm install grunt --save-dev
• npm install grunt-mocha-test --save-dev
• npm install -g jshint
• npm install grunt-contrib-jshint --save-dev
• npm install grunt-contrib-uglify --save-dev
• npm install grunt-contrib-concat --save-dev

 

GruntFile.js:

 

module.exports = function(grunt){
grunt.initConfig({
//Testeo de pruebas sobre el fichero persona.js
mochaTest: {
test: {
options: {
reporter : 'spec',
quiet: false
},
src:'persona.js'
}
},
//Verificamos errores sobre persona.js y persona1.js
jshint: {
files : ['persona.js','persona1.js'],
options: {
globals: {
jQuery: true
}
}
},
//Concatenamos los dos ficheros
concat: {
dist: {
src: ['persona.js','persona1.js'],
dest: 'personasJuntas.js',
},
},
//Hacemos la compresion sobre personasJuntas
uglify: {
build: {
src:'personasJuntas.js',
dest: 'personasJuntas.min.js'
}
},

});
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('automatizar',['mochaTest','jshint','concat','uglify',]);
};

 

Arrancar grunt:

 

grunt automatizar

 

Salida:

 

  √ Correcto el nombre

  √ Correcto el primerApellido

  √ Correcto el segundoApellido

 

  3 passing (6ms)

 

 

Running "jshint:files" (jshint) task

>> 2 files lint free.

 

Running "concat:dist" (concat) task

 

Running "uglify:build" (uglify) task

>> 1 file created 2.24 kB → 1.73 kB

 

Done.