Según yeoman.io, "Yeoman es un conjunto de herramientas, bibliotecas y un flujo de trabajo sólido y de opinión que puede ayudar a los desarrolladores a crear rápidamente aplicaciones web atractivas y atractivas". Vamos a profundizar y ver exactamente lo que esto significa!
_ .--------------------------. _ | o | _ | Bienvenido a Yeoman, | | _ | | ¡damas y caballeros! | / \ Y / \ o _________________________ | || : | // o / --- \ _ \ / _
Se está trabajando mucho en la construcción de aplicaciones web en estos días. Hay innumerables bibliotecas para usar, patrones, estilos, cuadrículas, calderas, bootstraps ... ¡la lista continúa! Yeoman es una respuesta a algunos de estos problemas. En lugar de tener que perder un montón de tiempo para poner en marcha una aplicación, Yeoman hace la peor parte del trabajo por usted, solo requiere unos pocos comandos..
La forma más rápida de comenzar a usar Yeoman es ejecutando el siguiente script.
rizo -L get.yeoman.io | shNota: Yeoman es compatible con OSX, Linux y Windows. Este proceso se registra en unos 10 minutos. En una actualización futura, este proceso de instalación será modificado, sin embargo.
Entonces, eso fue fácil. ¿Lo que acaba de suceder? ¡Muchas cosas! los instalar.sh
limar ,get.yeoman.io
, tiene un encabezado que describe exactamente lo que ocurrió.
# * Detecte Mac o Linux, elija el administrador de paquetes para usar # * En Mac, instale homebrew si no está presente # * Luego instale estos: git optipng jpeg-turbo phantomjs # * Asegúrese de que Ruby> = 1.8.7 esté cerca, instale si no (para Compass) # * Instale el último paquete NodeJS # * Instale Compass # * Descargue Yeoman zip en una carpeta temporal # * Instálelo como un módulo de nodo global
Y ahí lo tienes.!
Yeoman se instala como un módulo de Nodo global, así que abra su TOC (Terminal of Choice) y ejecute hacendado
.
La primera vez que se ejecuta, preguntará si desea permitirles mantener estadísticas sobre su uso de Yeoman. De hecho, tienen una configuración de cuenta de Google Analytics para rastrear todo tipo de estadísticas de uso interesantes.
Simplemente corriendo hacendado
a partir de ahora imprimirá una lista de los comandos disponibles para ejecutar..
yeoman init
Aquí es donde ocurre la magia de los andamios. Ejecute el siguiente comando para una aplicación básica de andamios.
yeoman init
Este comando hará cinco preguntas:
Fuera de la caja, corriendo en eso
incluirá HTML5 Boilerplate, y jQuery and Modernizr. Aquí hay una lista más expandida.
También compilará los archivos CoffeeScript y Compass de inmediato.!
Generadores Son la magia detrás de todos los andamios. los en eso
El comando, en sí mismo, se basa en un generador. Hay un repositorio separado para ellos. Hay muchos disponibles ya, incluyendo Columna vertebral, Ascua, y Angular para nombrar sólo algunos de ellos. Para ver una lista de todos ellos, simplemente ejecute ...
yeoman init --ayuda
Los generadores son una gran parte de Yeoman, y están destinados a ser modificados y agregados a.
Propina: Para obtener ayuda sobre cómo crear su propio generador, consulte el área de generadores de la documentación..Si desea crear su propia aplicación Backbone.js, simplemente puede ejecutar:
mkdir backboneapp && cd backboneapp yeoman init backbone
Esto construirá un proyecto con varios modelos, vistas, colecciones precargadas con Lodash, Mocha, jQuery y HTML5..
Puedes hacer lo mismo con angular y ascua Como se mencionó previamente.
Hay varios sub generadores También, que te permiten hacer cosas, como:
troncal de inicio de yeoman: vista impresionante Ver troncal de inicio de yeoman: modelo awesomeModel troncal de inicio de yeoman: colección awesomeCollection espina de inicio de yeoman: enrutador awesomeRouter
Entonces BAM, tendrás algo nuevo. Codez para trabajar, en lugar de perder un montón de tiempo reescribiendo el código repetitivo!
construir yeoman
Debajo de las portadas, encontrarás Grunt, que es un marco popular, creado por Ben Alman (Cowboy), para crear aplicaciones de JavaScript. Se basa en un gruñido
Archivo de opciones de configuración que configura tareas para realizar diversas operaciones, como alineación, combinación, reducción, etc..
Yeoman está construido sobre Grunt, pero lo amplía para proporcionar algunas modificaciones y características nuevas. Éstos incluyen:
r.js
La configuración se colocará dentro de un gruntfile.js
archivo en la aplicación generada. Cuando hayas terminado de desarrollar, ejecuta lo siguiente para construir la aplicación.
construir yeoman
Su aplicación recién construida se colocará dentro de un dist /
carpeta. Una característica interesante es cómo Yeoman tomará las referencias de los scripts, como:
Y, después de ejecutar la compilación, concatice y minimice esos archivos a una sola guión
referencia. Eso es doce solicitudes HTTP hasta uno!
Cada uno de los pasos para el proceso de construcción se puede encontrar en gruntfile.js, que se genera cuando se crea la aplicación. Hay varias opciones de objetivo de compilación también.
servidor yeoman
Yeoman también ofrece un servidor de alojamiento integrado para probar su aplicación localmente. LiveReload o la simple visualización de archivos si no tiene LiveReload también garantiza que, al ejecutar el servidor, cualquier cambio en los archivos de la aplicación volverá a cargar automáticamente el navegador con los nuevos cambios. Por defecto, el puerto en el que se ejecutará es 3051
. Al ejecutar lo siguiente ...
# Ejecutar esto para la versión no construida del servidor yeoman # O esto para la versión construida del servidor yeoman: dist
Aparecerá una nueva ventana de navegador con la aplicación en ejecución. El servidor también compilará los activos de Coffee y Sass, y los colocará dentro de un temperatura
directorio. ¡Así que no tienes que preocuparte por compilar! Hay varios otros destinos de servidor; asegúrate de revisarlos.
prueba de yeoman
Mocha es un marco de prueba de unidades popular y está integrado en Yeoman. Cuando un proyecto es andamiaje, una carpeta de prueba con un index.html
El archivo se crea con Mocha y Chai para afirmaciones. Simplemente ejecute:
prueba de yeoman
Yeoman ejecutará Mocha contra PhantomJS, que es un navegador webkit sin cabeza que se ejecuta dentro de Node.js. Entonces, puede sentirse libre de agregar nuevas pruebas en el index.html
expediente. Las pruebas unitarias pueden mejorar enormemente cualquier aplicación, y Yeoman hace que el proceso sea lo más fácil posible. Así que ya no hay excusas! También puedes usar Jasmine, si lo prefieres, pasando. --test-framework jasmine
al yeoman init
mando.
instalación de yeoman
Para instalar nuevas bibliotecas de clientes en su aplicación, Yeoman usa una biblioteca, llamada Bower, que es desarrollada por algunas de las personas en Twitter.
Bower es un gestor de paquetes para la web. Bower te permite instalar fácilmente recursos como imágenes, CSS y JavaScript, y administra las dependencias por ti.
Yeoman permite los siguientes comandos:
# Instalar cualquier paquete (s) espacio delimitado yeoman instalar jquery # Desinstalar cosas yeoman desinstalar jquery # Actualizar cosas yeoman actualizar jquery # Las instalaciones subrayan también, ya que la red troncal depende de ello. específicamente basado en un nombre búsqueda de yeoman mocha # Ir a buscar cosas basadas en una palabra clave búsqueda de yeoman subrayado
Bower es una excelente adición a Yeoman, y resuelve el problema del flujo de trabajo de tener que recuperar constantemente las bibliotecas al crear aplicaciones. También asegura que estén al día. Aquí hay un ejemplo de cómo podrías usar Bower.
bower install jquery bower install git: //github.com/maccman/package-jquery.git bower install http://code.jquery.com/jquery-1.7.2.js bower install ./repos/jquery
Las aplicaciones instaladas con bower se almacenarán en un componente.json archivo en la raíz de la aplicación.
Vamos a crear una aplicación Backbone simple de principio a fin..
# Cree una nueva aplicación backbone de yeoman init # Cree un nuevo modelo y una colección backbone de yeoman init: modelo de foto yeoman init backbone: colección de fotos # Cree algunas nuevas vistas para flickr fotos públicas yeoman init backbone: vea flickr yeoman backbone de inicio: vea foto Artículo # ONDAS DE MANOS Y AÑADIDOS MUCHO CÓDIGO # https://github.com/jcreamer898/yeomanbbapp servidor de yeoman # ¡Construya TODAS LAS COSAS! yeoman build # Echa un vistazo a la nueva compilación man ... yeoman server: dist
Wow, es casi demasiado simple, y no olvides que puedes crear alias de Bash para acortar aún más este código. ¡La parte más difícil fue crear la aplicación de muestra! Pero, esa es la belleza de ello. Yeoman te aleja de
el código repetitivo, y le permite centrarse exclusivamente en las cosas difíciles!
Si lo desea, eche un vistazo a la aplicación para ver cómo fueron las cosas. Diría bastante bien.
Yeoman puede acelerar rápidamente el proceso de desarrollo de una nueva aplicación. En lugar de perder el tiempo reuniendo bibliotecas y escribiendo código repetitivo, en su lugar, escriba algunos comandos, ¡y ya está listo! Aún mejor, es de código abierto y escrito por un par de personas que quizás conozcas!
Disfrutar!