Cómo instalar y utilizar herramientas relacionadas con Yeoman 1.0 en la plataforma Windows

Yeoman 1.0 reimpreso incluye los siguientes tres conjuntos de herramientas, que se describen a continuación:

yo: la herramienta de andamiaje de Yeoman (una herramienta utilizada para generar automáticamente esqueletos o códigos de sitios web)

bower: la herramienta de administración de paquetes (usada para administrar varios paquetes front-end utilizados en sitios web específicos, como: jQuery)

grunt: la herramienta de compilación (usada para realizar trabajo automatizado en algunos sitios web, como pruebas unitarias, minimización, ejecución de comandos por lotes)

Antes de instalar estos tres conjuntos de herramientas, hay muchas herramientas dependientes que deben instalarse con anticipación; de lo contrario, las instrucciones de la herramienta no se ejecutarán correctamente. Lo siguiente incluye node. Notas sobre la instalación de estas tres herramientas: js, Git para Windows y RubyInstaller:

※ Instale node.js para Windows

Seleccione la instalación correcta de Windows. y tenga en cuenta que la arquitectura de la CPU es diferente. Hay dos tipos de 32 bits y 64 bits:

Al realizar la instalación, asegúrese de que el proyecto Agregar a RUTA esté instalado:

※ Instale la herramienta de línea de comandos Git para Windows

Al realizar la instalación en el paso Ajustar su entorno PATH, seleccione Ejecutar Git desde el símbolo del sistema de Windows para obtener mayor compatibilidad y menos problemas:

Para Descanse, simplemente mantenga los valores predeterminados y la instalación se completará.

※ Instale el entorno de ejecución Ruby

Debido a que las operaciones de desarrollo front-end a menudo usan la herramienta Compass para escribir CSS, y cuando se usa Yeoman, los archivos de definición gruñidos generados por algunos generadores también Compass se usa para ejecutar, por lo que generalmente lo instalo con anticipación para evitar arrepentimientos como "el libro solo se usa cuando se usa" (¡reemplace el libro con una herramienta)! ^_^

Sin embargo, para instalar la herramienta Compass será necesario instalar Ruby antes de poder instalarla y utilizarla. Se recomienda realizar la instalación a través del archivo de instalación MSI proporcionado por RubyInstaller (Windows), pero hay un paso muy importante en el proceso de instalación: debe marcar la opción Agregar ejecutables de Ruby a su RUTA en el paso Destino de instalación y Tareas opcionales. p>

Después de instalar estas herramientas, puede comenzar a prepararse para instalar las herramientas relacionadas con Yeoman:

1. Abra Windows Powershell o el símbolo del sistema. Lo siguiente le indicará el símbolo del sistema, por ejemplo.

2. Instale las herramientas yo, bower y grunt a través del administrador de paquetes npm de node.js (módulos empaquetados de Node)

npm install -g yo grunt-cli bower

Entre ellos, -g significa instalar los tres paquetes yo, grunt-cli y bower globalmente

3. Instalar el paquete generador de código relacionado con yo

Porque yo es un conjunto de herramientas que se utiliza principalmente para generar automáticamente esqueletos o código de sitios web. Antes de ejecutar yo, debe preinstalar estas plantillas de generador de código. Estas se llaman YEOMAN GENERATORS. Puede usar YEOMAN para encontrar muchas plantillas de generadores listas para usar. También se puede instalar a través de npm.

Por ejemplo, si encuentra un generador de aplicaciones web en la página YEOMAN GENERATORS, puede usar el siguiente comando para instalarlo:

npm install -g generador-webapp

Si desea instalar el generador angular, puede utilizar el siguiente comando para instalarlo:

npm install -g generador-angular

¡Y así sucesivamente!

4. Por cierto, si desea instalar Compass, también puede ingresar el siguiente comando para instalarlo

gem update --system

gem install. compass

¡Instalación de Yeoman y Compass completada!

A continuación se muestra el uso de Yeoman para explicar los escenarios de uso de Yeoman y cómo mejorar el proceso de desarrollo. Usaremos yeoman para crear un nuevo sitio web. Los siguientes son los pasos:

1. Primero cree un directorio de trabajo del sitio web (o cree un directorio de trabajo a través de SVN/Git), que es una carpeta completamente en blanco:

2. Utilice el comando yo para generar el esqueleto del sitio web. Usamos el generador de aplicaciones web para crear el sitio web. El comando es el siguiente:

yo webapp

. En este punto, descubrirá que al ejecutarlo, es un proceso interactivo. Le hará algunas preguntas y luego lo ayudará a crear un buen sitio web al final:

Después de que hayamos respondido todas las preguntas. preguntas, comenzará a completar todo el trabajo de instalación al final. Sin embargo, es probable que vea mensajes de error durante el proceso de instalación.

Como se muestra en la imagen a continuación, es posible que vea el siguiente mensaje de error cuando lo ejecute por primera vez. He marcado el texto de la clave en azul:

Error de aplicación web

No. Parece que no tiene un generador con el nombre mocha:app instalado.

Puedes ver los generadores disponibles con npm search yeoman-generator y luego instalarlos con npm install [nombre].

Para ver los 18 generadores registrados, ejecute la opción `--help`.

El mensaje de error anterior indica que al ejecutar el generador de aplicaciones web, se utilizará el generador mocha:app y se verán los dos puntos. aquí está (:) representa el subgenerador, es decir, ejecutará el subgenerador de aplicaciones en el generador de mocha, por lo que debemos instalar el generador de mocha para que el generador de aplicaciones web se ejecute correctamente.

El método de instalación del generador de mocha se mencionó anteriormente en este artículo. Simplemente ejecute el siguiente comando:

npm install -g generador-mocha

En. Esta vez, si ejecutamos el comando yo webapp nuevamente, no aparecerá ningún mensaje de error y el esqueleto del sitio web quedará completamente establecido.

Un comando simple en realidad nos ayuda a hacer muchas cosas. Ilustrémoslo a partir de la estructura de carpetas generada y varios archivos importantes:

imagen

De forma predeterminada, el directorio raíz del sitio web se colocará en la carpeta de la aplicación (no es necesario preguntar por qué, porque todos están acostumbrados a colocar sitios web en el directorio de la aplicación)

Habrá datos bower_components debajo de la carpeta de la aplicación Clip para guardar el kit frontal instalado a través de la glorieta.

La carpeta node_modules es el paquete relacionado requerido por node.js, que por cierto se instala al instalar a través de yo.

El Gruntfile.js en el directorio raíz es el archivo de definición de gruñido generado por defecto al instalar la aplicación web. Es una tarea predefinida (Tareas)

bower.json es el. archivo de definición de paquete específico de Bower, que define el nombre y la versión del paquete Bower actualmente instalado (no edite este archivo manualmente)

package.json es un archivo de definición de paquete específico de node.js. que define el paquete bower instalado actualmente. El nombre y la versión del paquete node.js (no edite este archivo manualmente)

Por supuesto, hay muchos otros archivos que comienzan con un punto decimal, que tienen usos especiales. Los compartiré nuevamente si tengo la oportunidad.

3. Utilice el comando bower para instalar o eliminar un paquete de interfaz de usuario específico.

Por ejemplo, queremos instalar un paquete jQuery UI adicional en este sitio web. Es posible que no conozca el nombre del paquete Bower de jQuery UI. Entonces puede usar Bower Search [palabra clave] para buscar, por ejemplo:

bower search jquery-ui

Entonces usted. Puede usar el comando bower install para instalar, como se muestra en el siguiente ejemplo:

bower install jquery-ui

Desde el proceso de ejecución (como se muestra a continuación), también verá que el El proceso de ejecución del comando de instalación de Bower también es interactivo. Aquí le permite seleccionar la dependencia entre jquery-ui y jquery. Si elige la nueva versión de jquery, Bower le ayudará a instalar la última versión de jquery. Para la versión anterior (jquery 1.9.1), Bower también instalará la versión correspondiente de jquery-ui:

El proceso de instalación del paquete Bower puede ayudarle a administrar un número cada vez mayor de paquetes front-end. De hecho, seguir el proceso de Yeoman puede reducir mucho el tiempo de desarrollo para la construcción de sitios web, especialmente los problemas de dependencias y actualizaciones de versiones entre dichos paquetes.

Sin embargo, es posible que también quieras preguntar, si es jQuery UI, ¿cómo sé que la palabra clave que debo ingresar es jquery-ui? Sí, también puedes buscar tus palabras clave directamente usando jquery, pero los resultados serán más si estás en el símbolo del sistema de Windows, también puedes usar el comando findtr para ayudarte a filtrar resultados innecesarios, por ejemplo: < /p. >

bower search jquery |findstr ui

Alternativamente, puede usar el comando bower search (sin otros parámetros) para enumerar todos los paquetes instalables. Mi costumbre personal es guardar todos los paquetes en un archivo de texto y. luego busque en Notepad o Notepad2:

bower search > all_bower_packages.txt

( Nota: a partir de hoy, hay 3765 El paquete está arriba y se agrega todos los días... )

Para eliminar el paquete jquery-ui que acaba de instalar, use el comando bower uninstall [nombre del paquete] para eliminarlo, como se muestra en el siguiente ejemplo:

bower uninstall jquery- ui

Para consultar el uso completo del comando bower, puede ingresar directamente el comando bower y se mostrarán las instrucciones relevantes:

4. Ordenar trabajos

Dado que la tarea principal de grunt es ejecutar esos trabajos predefinidos, es decir, aquellos trabajos de procesos repetitivos y complejos, a través de métodos predefinidos, puedes hacerlo mediante instrucciones simples para implementar. . Tomando el esqueleto del sitio web que acabamos de instalar a través del generador de aplicaciones web, ya tiene muchos trabajos útiles incorporados. Si desea saber qué trabajos están disponibles, puede ingresar la siguiente consulta específica:

gruñido -- ayuda

Donde puede ver Tareas disponibles, se han definido muchos trabajos:

Sin embargo, con solo mirar estos nombres de trabajos predefinidos, es posible que no sepa qué se debe realizar y algunos Las tareas son secuenciales. Si se invierte el orden de ejecución, no se pueden obtener resultados. Un mejor método de investigación es abrir el archivo Gruntfile.js y ver la definición de grunt.registerTask al final del archivo, por ejemplo: