Administra tu aplicación con Laravel + Grunt + Bower

¿Por qué eliges esto?

El código abierto ahora es popular, desde las bibliotecas de servicios de fondo, a los complementos front-end de jQuery, los marcos front-end, etc. Se pueden seleccionar más y más componentes excelentes para usar en proyectos existentes. A medida que los componentes de código abierto se actualizan e iteran, sus dependencias entre sí se hacen más complejas. El marco anterior siempre es difícil de adaptar a los nuevos cambios, e incluso si cambia el marco antiguo para nuevas características, será un poco más frustrante. Luego habrá nuevos marcos y herramientas que surgirán en este momento.

La dirección en la que comienza cada proyecto es muy importante, y un buen comienzo puede evitar los diversos problemas que siguen. Las tres herramientas que se mencionan a continuación son un buen punto de partida para el desarrollo de aplicaciones existentes. Laravel

Laravel es un muy nuevo marco de PHP
, que se basa en las excelentes características de muchos de los predecesores, comenzando con PHP
5, y presenta Composer como una herramienta de gestión de paquetes. Se llama el marco PHP
creado por los artistas de WEB. Grunt

Una herramienta de compilación automatizada basada en JavaScript que automatiza tareas repetitivas como minificación, compilación, prueba de unidades, alineación y más. Bower

Herramientas de administración de paquetes para el desarrollo de front-end web que abordan las dependencias entre marcos de front-end para facilitar la modularidad y la reutilización. Ventajas

Larvel puede aprovechar la última versión de PHP y eliminar algunos problemas históricos. El uso de Composer puede reducir considerablemente el número de "ruedas"; se pueden encontrar excelentes paquetes en Packagist, estos paquetes casi todos se administran con Github, utilizando el problema de Github y la solicitud puede ayudar a mejorar la calidad del paquete. Bower puede ayudar a administrar bibliotecas de front-end de código abierto, como Bootstrap y jQuery, y estos paquetes también están alojados en Github. Grunt ayuda a pegar los componentes de código abierto en la parte delantera y trasera, automatizando el trabajo como la compilación y la compresión de fusión.

Requisitos previos de instalación

Algunos componentes que deben instalarse con anticipación no están cubiertos aquí. Utilice Google.

ComposerNode &npmGruntBower

Laravel

Instalar un proyecto de Laravel con Composer es muy fácil.

composer create-project laravel /laravel myproject

Una vez completada la instalación, la estructura de marco de lalavel se genera en el directorio myproject y el archivo de entrada está en público. En el directorio raíz de myproject, hay un archivo composer.json. Este archivo tiene este aspecto:

{" nombre ": " laravel /laravel ", " description ": " The Laravel Framework ., "palabras clave": [marco "," laravel ", licencia": MIT ", ", {{quot; laravel /framework ": " 4.1. * ";}, //...}

Este archivo puede controlar algunas dependencias del proyecto. Necesitamos agregar algunos componentes directamente bajo requerimiento. Composer nos ayudará a encontrar los componentes necesarios. Paquete de dependencia.

A continuación, para instalar el marco de front-end, primero creamos varios directorios públicos y creamos un directorio similar en público

. - activos |  | - css |  | - fuentes |  `- js | - favicon.ico | - index.php | - packages`-- robots.txt

El único directorio de activos aquí es mi recientemente creado Bower

Después de preparar el marco de back-end, puede instalar el marco de frontend, como Bootstrap. La biblioteca de aplicaciones para usuario instalada con Bower es el proyecto completo, no los archivos individuales que necesitamos, por lo que podemos colocarlos en un lugar y luego usar Grunt para manejarlos.

Primero configure la ruta de instalación, el archivo de configuración .bowerrc en el directorio raíz de myproject es

{" directorio ": " public /asset /bower "}

El archivo le dice a bower que los paquetes descargados están instalados en public /asset /bower.

A continuación, cree un archivo de configuración de Bower bower.json en el directorio raíz de

{" nombre ": " myproject "}

y luego agregue la biblioteca de front-end

bower install bootstrap -S

Este comando usará el archivo de configuración para administrar todas las dependencias de la biblioteca. En este momento, mire el archivo de configuración. Bower nos ayudó a instalar automáticamente el paquete dependiente de Bootstrap – jQuery. También se modificó el archivo de configuración

{" nombre ": " myproject ", " dependencias ": {" bootstrap ": " ~ 3.1.1 "}}

Bajo el directorio de destino, bajo público /activos, se genera un directorio Bower, que contiene Bootstrap y jQuery. Grunt

De acuerdo con los pasos anteriores, es muy conveniente crear el marco de back-end y el de front-end, pero el marco de front-end no es muy conveniente para usar los archivos bajo bower directamente, y también puede implicar algunos Los pasos de la compresión de fusión de la biblioteca. Estas preguntas se pueden entregar a Grunt para que lo haga.

Primero inicialice un archivo de configuración con npm init en el directorio raíz de myproject. De acuerdo con las indicaciones, puede completar los pasos. El último archivo de configuración generado package.json debería tener este aspecto:

{" nombre ": " myproject "