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

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:

• Git
• NodeJS
• Bower
• Ruby
• paquete grunt-cli

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:

1

gem install compass

1

gem install bundle

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

1

gem install foundation

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

1

foundation new project_name

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:

1

bundle

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:

1

bundle exec compass watch

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:

1

npm install -g yo

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:

1

[sudo] npm install -g generator-gulp-bootstrap

Hacer Scaffolding (construcción del esqueleto)  del Proyecto

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

1

yo gulp-bootstrap

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:

1

gulp

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

1

gulp watch

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:

1

[sudo] npm install generator-h5bp -g

Haz Scaffolding  del Proyecto

Haz Scaffolding de tu nuevo proyecto con éste comando:

1

yo h5bp

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:

1

[sudo] npm install yeoman/generator-mobile -g

Haz scaffolding  del Proyecto

Haz scaffolding de tu proyecto GWSK con el comando:

1

yo mobile

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:

1

gulp serve

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:

1

[sudo] npm install browser-sync

Para compilar todo el proyecto ejecuta éste comando:

1

gulp

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

1

gulp pagespeed

É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:

1

gulp deploy

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!