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-clisudo npm install -g grunt-cliNuestro 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
GRUNT
By César Eduardo Suárez
