Ya desde un año atrás escuche sobre GruntJs pero realmente no me interese mucho pero comencé a ver muchos artículos y bueno me puse a jugar con GruntJs.
Ahora me siento una mejor persona , mas pro, mas bella, mas productiva , etc.
La idea de este articulo es llevarlos por el buen camino de los Front End PRO y que lo bueno de GruntJs no va a introducir a utilizar muchas cosas nuevas si una vez entras veras que ahí muchas utilidades que nos ayudan a trabajar y aumentar nuestra productividad.
Que es GruntJs?
Basicamente es un automatizador de tareas y si buscas mas información de que es tienes mucha información sobre GruntJs.
Por qué Aprender GruntJs?
Porque que ayudara optimizar tus tiempos, desarrollos, mas ordenados,
Como Instalar GruntJs?
Debemos tener instalado el node.js para tener el manejador de dependencias y modulos de node.js.
Cuando tenga lo tengan instalado para confirmar si todo va bien nos vamos a nuestro CMD de Windows y nos debe mandar esto.
Ahora para la instalación es recomendable que vuelvan abrir el CMD pero como administrador
Ahora no importa en que carpeta estemos posicionados desde el DOS y ejecutamos la siguiente linea
Npm install -g grunt-cli |
Ejecutamos con –g para que sea global y con eso ya tenemos listo para trabajar con GruntJs nos dirigimos a nuestra carpeta donde esta nuestro nuevo proyecto.
Casi listos para comenzar pero necesitamos 2 archivos pero ahora solo necesitamos solo el package.json que sirve para agregar la configuración de las dependencias. Entonces creamos un archivo con el nombre package.json e ingresamos el siguiente contenido.
{ "name": "mi proyecto", "version": "0.1.0", "description": "", "devDependencies": { } } |
Descargamos los archivos necesario para trabajar con grunt en nuestra carpeta del proyecto quiero decir que debemos estar posicionados desde el DOS en la carpeta del proyecto y ejecutamos la siguiente línea.
Npm install grunt --save-dev |
— save nos permite insertar todas las dependencias instaladas al package.json pues ahora si vemos nuestro archivo package.json se habrá agregado una línea.
{ "name": "mi proyecto", "version": "0.1.0", "description": "", "devDependencies": { "grunt": "^0.4.5", } } |
Ahora también esto se pudo hacer de otra manera donde primero creamos al crear el package.json y agregamos todas las dependencias como nos lo dejo al instalar. Nos dirigimos a DOS y ejecutamos solo
npm install |
Y leería el archivo package.json y verificaría si el paquete existe en el proyecto de lo contrario lo va a descargar.
Si todo nos fue bien se nos debio crear una carpeta “node_modules” y dentro una carpeta grunt. Nos falta el ultimo paso de crear el archivo.
module.exports = function (grunt) { grunt.registerTask('default',function(){ grunt.log.writeln('GRUNJS CORRIENDO!'); }); } |
Nos dirigimos al DOS e ingresamos.
grunt |
ya tenemos nuestro GrunJs corriendo pero en este artículo solo tenemos corriendo y no estamos haciendo ninguna tarea y eso serán los próximos artículos.
Less con GrunJs grunt-contrib-less
Jade con GrunJs grunt-contrib-jade
Actualizacion automáticos con GrunJs grunt-contrib-watch
