Cargando

Ir a contenido

X

 


Crear arquitectura de desarrollo Front End con NPM, Grunt y Bower

Tutorial para aprender a realizar una buena arquitectura de desarrollo Front End con NPM, Grunt y Bower. Se debe tener conocimiento sobre HTML, CSS, JavaScript.


Escrito por abr 23 2016 12:29


Instalación

 

Instalación NodeJS


Ahora sí, manos a la obra!. Empecemos por instalar NodeJS. Eres Windows, Linux o Mac?, esto no importa, en cualquiera de los tres podremos trabajar ^^. En mi caso voy a realizar todas las instalaciones en Windows.

 

Primero vayamos a la página de NodeJS en la opción Download:

 

 

Elegimos el instalador a descargar dependiendo de nuestro sistema operativo.

 

[color=#a9a9a9]Pulsa imagen para ampliarla[/color]

 

Después de descargar el NodeJS podemos instalarlo como cualquier programa de nuestro ordenador.

 

npm-grunt-bower-2.jpg

 

Después de haber finalizado la instalación abrimos una línea de comandos (MSDOS, Shell o Terminal) y colocamos el siguiente comando:

node --version
npm --version
En este caso esta es la versión instalada.

 

npm-grunt-bower-3.jpg

 

 

Al tener NodeJS instalado en nuestro sistema tenemos un listado de comandos. Empezaremos a utilizar algunos para la instalación de Grunt y Bower.

 

Instalando Grunt


Como se mencionó anteriormente, Grunt es un conjunto de paquetes de NPM, podemos hacer la instalación de este con el siguiente comando:
npm install -g grunt
Antes de ejecutar este comando en nuestra línea de comandos te explico que le estamos diciendo a NodeJS que haga.
  • npm: es el comando de paquetes de NodeJS.
  • install: indicamos que lo que queremos es hacer una instalación.
  • -g: Instala el paquete globalmente (que pueda ser usado en cualquier lugar de tu sistema operativo). Cabe destacar que si no queremos instalar globalmente este paquete podemos omitir -g en el comando a ejecutar. Ya que NodeJS nos da la libertad instalar un paquete solo para un proyecto en específico, o global para el sistema operativo y ser usado en cualquier proyecto.
  • grunt: Paquete a instalar.

 

npm-grunt-bower-4.jpg

 

 

Nota
La instalación de estos paquetes pueden demorar dependiendo de la velocidad de tu internet.

 

Instalando Bower


De la misma forma como instalamos Grunt instalaremos el paquete de Bower:
npm install -g bower
Instalación paquete

 

npm-grunt-bower-5.jpg

 

Podemos ver como quedaron instalados nuestros paquetes con el comando:

npm ls -g
paquetes instalados

 

 

npm-grunt-bower-6.jpg

 

 



AYUDA A MEJORAR ESTE TUTORIAL!

¿Crees que puedes corregir o mejorar este tutorial? Puedes enviar tu Edición con los cambios que consideres útiles.

0 usuarios han editado este tutorial. ¡Edita y conviértete en un reconocido experto!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado abr 23 2016 12:29
  •   Actualizado abr 23 2016 12:55
  •   Visitas 3.8K
  •   Nivel
    Profesional