Share
Hasta ahora, ha aprendido cómo usar la línea de comandos para la administración de paquetes de terceros, cómo encender su código de usuario, la automatización con los encargados de tareas, la recarga en vivo y la sincronización del navegador..
En este último tutorial de la serie, aprenderá cómo usar la línea de comandos para que sus proyectos comiencen a ejecutarse mediante el andamiaje de nuevos proyectos que tengan todos los códigos de terceros que requieren, así como la administración de tareas de Grunt o Gulp ya configurada. , en cuestión de momentos.
Hay más de mil tipos diferentes de proyectos que actualmente puedes usar en la línea de comandos, pero en este tutorial veremos cuatro de ellos para proyectos basados en:
Foundation tiene su propia CLI (interfaz de línea de comando) que es excelente para el andamiaje de proyectos de la infraestructura de Foundation. Veamos cómo usar el CLI de Foundation para crear un proyecto utilizando Compass..
La primera parte de los andamios de un nuevo proyecto de Foundation es instalar el CLI requerido. Antes de hacerlo, deberá asegurarse de tener cinco requisitos previos instalados en su sistema:
Cubrimos la instalación de NodeJS, Git y Bower en los paquetes de terceros de Taming, la instalación de Ruby se cubrió en Encender el código del extremo frontal y la instalación de grunt-cli en Automatización con los corredores de tareas.
Después de asegurarte de que tienes Ruby instalado, deberás instalar las gemas de Compass y Bundler con estos comandos:
gema instalar brújula
paquete de instalación de gemas
Ahora puede seguir adelante e instalar el CLI de Foundation con este comando:
base de instalación de gemas
Ahora, cada vez que desee iniciar un nuevo proyecto de Foundation, abra un terminal donde desee crearlo y ejecute el comando
fundación nuevo project_name
A continuación, verás tu nueva estructura de carpetas de proyectos generada, así:
Desde aquí, deberá tener un terminal apuntando dentro de su carpeta de proyecto real, por ejemplo. dentro de “project_name”.
La gema "bundler" que instaló anteriormente se usará aquí para asegurarse de que se hayan instalado todas las bibliotecas necesarias. Haz que todo se aleje al ejecutar el comando:
haz
Solo tiene que hacer esto una vez cuando cree sus proyectos de Foundation Compass por primera vez.
En el navegador, tu nuevo proyecto se verá así:
Ya estás listo para comenzar el desarrollo de tu proyecto. Hay un compilador incorporado de Sass que mirará los archivos ".scss" en la biblioteca en busca de cambios, y luego los compilará en css para usted. Actívalo con el comando:
paquete de reloj de brújula exec
Yeoman es una herramienta diseñada expresamente para el andamiaje de nuevos proyectos. Funciona sobre NodeJS, integra Bower para la administración de paquetes y usa Grunt o Gulp para la ejecución de tareas.
Después de instalar Yeoman, el proceso básico para el andamiaje se convierte en cualquier nuevo proyecto:
Accentsconagua
yo para generar un nuevo proyecto, por ejemplo. yo h5bp Lea más sobre Yeoman en: http://yeoman.io/
Para usar Yeoman, deberás tener Bower, Grunt-Cli y Gulp instalados globalmente, lo que deberías tener en este punto siempre y cuando hayas seguido todos los tutoriales de la serie hasta el momento..
Instale Yeoman globalmente con el comando:
npm install -g yo
Ahora está listo para ir a buscar generadores y andamios nuevos proyectos..
Para armar un proyecto Bootstrap usaremos generator-gulp-bootstrap. Entre otras cosas, este generador lo configura con el marco de Bootstrap, jQuery & Modernizr, BrowserSync, la compilación automática de Sass a través de LibSass, la alineación automática de JS y la optimización de imágenes..
Instale el generador a nivel mundial con:
[sudo] npm install -g generator-gulp-bootstrap
Apunte su terminal a donde quiera que desee montar su nuevo proyecto y ejecute:
yo trago de arranque
Obtendrá una pequeña pantalla como esta en su terminal, y podrá verificar que desea usar Bootstrap y Modernizr:
Una vez que el generador termine de ejecutarse, tendrá una estructura de carpetas como esta:
Para construir su proyecto use el comando:
trago
Para activar una vista previa local con la compilación automática y la ejecución de recarga:
trago reloj
En un navegador, tu nuevo proyecto de Bootstrap se verá así:
Para crear un nuevo proyecto de HTML5 Boilerplate utilizaremos generator-h5bp.
Instale el generador a nivel mundial con:
[sudo] npm install generator-h5bp -g
Scaffold su nuevo proyecto con este comando:
yo h5bp
Tendrás la opción de elegir si quieres que se incluya o no los documentos en tu proyecto, entonces el generador se ejecutará.
Luego tendrás un nuevo proyecto HTML5 Boilerplate estructurado como:
En un navegador, todo lo que verá será un simple mensaje de "¡Hola mundo!", Pero si ve el código verá que tiene todo lo que necesita para poner en marcha su sitio HTML5:
El Web Starter Kit es un proyecto de Google, diseñado como "repetitivo y herramientas para el desarrollo de múltiples dispositivos". Puede leer todo sobre sus características en: https://developers.google.com/web/starter-kit/
Para andamiar usaremos generador-móvil..
Instale el generador a nivel mundial con:
[sudo] npm install yeoman / generator-mobile -g
Scaffold su proyecto GWSK con el comando:
yo móvil
En su terminal, responderá a una serie de preguntas según las cuales se generará su proyecto:
Cuando el generador haya terminado de ejecutar su nuevo proyecto tendrá esta estructura:
Para abrir una vista previa localhost potenciada por BrowserSync, ejecute este comando:
un buen trago
La vista previa de tu sitio se verá así:
Nota: Después de ejecutar el comando gulp serve, es posible que aparezca un mensaje de error que indica que no se pudo encontrar la sincronización del navegador. Si es así, instálalo manualmente en tu carpeta con este comando:
[sudo] npm install browser-sync
Para construir todo el proyecto ejecute este comando:
trago
Para obtener retroalimentación sobre la velocidad de ejecución de su proyecto:
gran velocidad de las páginas
Este comando le dará una lectura de los datos de "velocidad de las páginas" en su terminal de la siguiente manera:
Y si eligió una de las opciones de alojamiento mientras organiza su proyecto, publique su sitio con:
desplegar trago
Eso es todo para este tutorial: ahora tiene una serie de herramientas a su alcance para ponerse en marcha con algunos marcos frontales comunes, todo a través del poder de la línea de comandos.!
