Cargando



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.


abr 23 2016 13:29
Profesional
abr 23 2016 13:55

Introducción

 

1-java.jpg

 

Para este tutorial es necesario tener instalado GIT y tener algún conocimiento básico de ello ya que no entraremos en detalle sobre el uso de esta tecnología. De igual forma tener conocimiento en desarrollo web (por lo menos conocer sobre los lenguajes HTML, CSS y Javascript).

 

Después de llevar varios años trabajando como desarrolladores una de las preguntas que se nos presenta a la hora de estar programando es, ¿cómo puedo automatizar mi trabajo y ahorrar tiempo? O, ¿Como hago para organizar mejor mi proyecto?.

 

No nos referimos al uso de librerías o framework que nos ayudan a ahorrar tiempos en algunos casos, ni en el uso de IDEs que nos brindan comodidad y facilidad al programar. Hay algo más que necesitamos hoy día para que nuestro desarrollo sea mucho más profesional, tanto en el resultado final para nuestros clientes, para nuestros colegas, o incluso para nosotros mismos. Existen algunas plantillas de desarrollo que nos proveen estás ayudas pero pueden irse mucho más allá de lo que necesitamos, como por ejemplo, Angular Seed que nos provee recursos para el desarrollo de una aplicación en AngularJS, pero ya son plantillas que están enfatizadas para tipos de proyectos específicos, aquí es donde es importante crear nuestro entorno de trabajo y estructurarlo de la manera que mejor nos convenga.

 

Vamos al grano, si queremos lograr lo mencionado anteriormente una de nuestras alternativas es usar NodeJS, Grunt, y Bower.

 

Te preguntarás qué es cada uno y para que sirven.

 

NodeJS
NodeJS es un lenguaje del lado del servidor desarrollador en Javascript que nos va a servir para crear un servidor a nuestros proyectos gracias al uso de NPM (Node Package Manager). No entraré en detalles conceptuales sobre este lenguaje ya que no es la prioridad del tema.

 

Más información: https://nodejs.org/

 

Grunt
Grunt, es un automatizador de tareas que nos va a facilitar muchos trabajos que hacemos manualmente a la hora de desarrollar.

 

Más información: http://gruntjs.com/

 

Bower
Bower es una biblioteca de librerías front end, el cual nos provee un montón de alternativas como plugins y frameworks que nos pueden servir en nuestros proyectos.

 

Más información: http://bower.io/

 

Grunt y Bower son paquetes de NPM, lo que quiere decir que ellos dependen de este último. Pasemos a la instalación de todos los componentes.

 


¿Te ayudó este Tutorial?


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!

X