Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Terminal
Webdesign

La línea de comandos para el diseño web: construir el esqueleto de nuevos proyectos

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Live Reload & BrowserSync
The Command Line for Web Design: Wrapping Up

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Hasta ahora has aprendido a usar la línea de comandos para manejar paquetes de terceros, potenciar tu código front end, automatizar procesos con ejecutores de tareas, recargar automáticamente una página o aplicación y sincronizar navegadores.

En éste tutorial de la serie aprenderás cómo usar la línea de comandos para iniciar tu proyecto al hacer scaffolding (construcción del esqueleto) de nuevos proyectos que tienen todo el código de terceros que requieren, así como el manejo de tareas en Grunt o Gulp ya configurado, en cuestión de momentos.

Hay más de mil diferentes tipos de proyectos que puedes hacer scaffolding utilizando la línea de comandos, pero en éste tutorial recorreremos cuatro de ellos para proyectos basados en:

  • Foundation
  • Bootstrap
  • HTML5 Boilerplate
  • Google Web Starter Kit

Foundation

Foundation tiene su propia CLI (interfaz de línea de comandos) que es magnífica para hacer scaffolding de proyectos del framework Foundation. Veremos como usar la CLI de Foundation para crear un proyecto utilizando Compass.

Instalar Foundation CLI & Requisitos Previos

La primera parte de hacer scaffolding  de un nuevo proyecto de Foundation es instalar la requerida CLI. Antes de que lo hagas, necesitarás asegurarte que tienes lo requisitos previos instalados en tu sistema:

Cubrimos la instalación de NodeJS, Git y Bower en Domando Paquetes de Terceros, la instalación de Ruby fue cubierta en Potenciando el Código Front End, y la instalación de grunt-cli fue cubierta en Automatización con Ejecutores de Tareas.

Después de asegurarte de tener Ruby instalado, necesitarás instalar las gemas Compass y Bundler con éstos comandos:

Ahora puedes continuar e instalar el CLI de Foundation con éste comando:

Crea un Proyecto Foundation

Ahora en cualquier momento que quieras comenzar un nuevo proyecto Foundation, abre una terminal donde quieras crearlo y ejecuta el comando

Entonces verás generada la estructura de directorio de tu proyecto recientemente creado, así:

Desde aquí, necesitarás tener una terminal apuntando dentro de tu directorio de proyecto, por ejemplo dentro de "project_name".

La gema "bundler" que instalaste previamente será usada aquí para asegurarte de que han sido instaladas todas las librerías requeridas. Ten todo preparado correctamente al ejecutar el comando:

Solo tienes que hacer ésto una vez cuando creas tus proyectos Foundation Compass.

En el navegador, tu nuevo proyecto se verá así:

Ahora estás listo para empezar a desarrollar tu propio proyecto. Hay un compilador Sass integrado que monitoreará cambios en los archivos ".scss" en la librería, luego los recompilará a css por tí. Actívalo con el comando:

Yeoman

Yeoman es una herramienta diseñada expresamente para hacer scaffolding de nuevos proyectos. Funciona arriba de NodeJS, integra Bower para manejo de paquetes, y usa Grunt o Gulp para ejecución de tareas.

Después de instalar Yeoman el proceso básico para hacer scaffolding de cualquier nuevo proyecto se convierte en:

  1. Encuentra e instala un generador Yeoman para el tipo de proyecto que quieres crear, por ejemplo generador-h5bp para un proyecto HTML5 Boilerplate.
  2. Escribe yo <generator_handle> para generar un nuevo proyecto, por ejemplo yo h5bp

Lee más sobre Yeoman en: http://yeoman.io/

Instala Yeoman

Para usar Yeoman, necesitarás tener instalados globalmente bower, grunt-cli y gulp, que ya los deberías tener a estas alturas si has seguido todos los tutoriales en la serie.

Instala Yeoman globalmente con el comando:

Ahora que estás listo para continuar y encontrar generadores y hacer scaffolding de en nuevos proyectos.

Crea un Proyecto Bootstrap

Para hacer scaffolding de un proyecto Bootstrap usaremos generator-gulp-bootstrap. Entre otras cosas, éste generador te prepara el framework Bootstrap, jQuery & Modernizr, BrowserSync, la compilación automática de Sass vía LibSass, el análisis automático del código Javascript y la optimización de imágenes.

Instala el Generador

Instala el generador globalmente con:

Hacer Scaffolding (construcción del esqueleto)  del Proyecto

Apunta tu terminal donde quisieras hacer scaffolding de tu nuevo proyecto y ejecuta:

Obtendrás una vista como ésta en tu terminal, y podrás verificar que quieres usar Bootstrap y Modernizr:

Después de que finaliza de ejecutarse el generador tendrás una estructura de directorios como ésta:

Comandos

Para compilar tu proyecto usa el comando:

Para generar una vista previa con compilación y recarga automática ejecuta:

En un navegador, tu nuevo proyecto Bootstrap se verá así:

Crea un Proyecto HTML5 Boilerplate

Para hacer scaffolding de un nuevo proyecto HTML5 Boilerplate usaremos generator-h5bp.

Instala el Generador

Instala el generador globalmente con:

Haz Scaffolding  del Proyecto

Haz Scaffolding de tu nuevo proyecto con éste comando:

Tendrás la opción para elegir si quieres o no incluir documentación en tu proyecto, luego el generador se ejecutará.

Posteriormente tendrás un nuevo proyecto HTML5 Boilerplate  estructurado así:

En un navegador todo lo que verás es un simple mensaje "Hello world!", pero si ves el codigo verás que tienes todo lo que necesitas para tener funcionando tu sitio HTML5:

Crea un Proyecto Google Web Starter Kit

Web Starter Kit es un proyecto de Google, diseñado como "plantilla & conjunto de herramientas para desarrollo en múltiples dispositivos". Puedes leer todo sobre sus funcionalidades en: https://developers.google.com/web/starter-kit/

Para hacer scaffolding usaremos generator-mobile.

Instala el Generador

Instala el generador globalmente con:

Haz scaffolding  del Proyecto

Haz scaffolding de tu proyecto GWSK con el comando:

En tu terminal responderás una serie de cuestionamientos basados en cual proyecto será generado:

Cuando el generador ha terminado de ejecutar tu nuevo proyecto tendrá ésta estructura:

Comandos

Para abrir una vista previa de servidor local hecha funcionar con BrowserSync ejecuta éste comando:

La vista previa de tu sitio se verá así:

Nota: Después de ejecutar el comando de gulp puedes ver un error de mensaje diciendo que browser-sync no pudo encontrarse. Si es así, instálalo manualmente en tu directorio con éste comando:

Para compilar todo el proyecto ejecuta éste comando:

Para obtener retroalimentación sobre la velocidad de tu proyecto ejecuta:

Éste comando te proporcionará una lectura de los datos sobre "velocidad de la página" en tu terminal así:

Y si elegiste uno de las opciones de alojamiento mientras hacías el scaffolding tu proyecto, publica tu sitio con:

En conclusión

Eso es todo por éste tutorial-ahora tienes un número de herramientas en la punta de tus dedos para tener funcionando unos cuantos frameworks conocidos, ¡Todo a través del poder de la línea de comandos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.