Di Yo a Yeoman

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!


Hacendado

 _ .--------------------------. _ | 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..

Antes de seguir adelante, tenemos que instalarlo.!

La forma más rápida de comenzar a usar Yeoman es ejecutando el siguiente script.

 rizo -L get.yeoman.io | sh
Nota: 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.!

Usalo

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.

  • HTML5 Boilerplate para la base principal
  • Compass Twitter Bootstrap para los archivos SASS ya que los archivos CSS se crean en SASS
  • Twitter Bootstrap para la lista opcional de complementos de JavaScript (opcional)
  • RequireJS para el módulo de AMD y soporte de carga de scripts (opcional)
  • RequireHM para el soporte experimental de sintaxis del módulo EcmaScript 6 sobre RequireJS (opcional)

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:

  • JSHint
  • Compilando CoffeeScript y SASS
  • Construyendo aplicaciones RequireJS, usando r.js
  • Concatenar, minimizar y comprimir PNGs y JPEGS
  • Ejecutando pruebas con PhantomJS
  • Construyendo un manifiesto de caché de aplicación
  • Y algunos otros.

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.

Aprenda más sobre el uso de Jasmine en sus proyectos aquí en Nettuts+.

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.


Ponlo todo junto

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.


Conclusión

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!