Integra Grunt JS en Symfony y reemplaza Assetic
Agencia web » Noticias digitales » Integra Grunt JS en Symfony y reemplaza Assetic

Integra Grunt JS en Symfony y reemplaza Assetic

Yo conocía GruntJS sin haberlo usado nunca pero hubiera tenido que saber de un desarrollador Symfony dame la masa para que mire en esta solución. Primero, reemplace Asetic por GruntJS fue para mí una solución para que mis proyectos funcionaran Symfony con H HVM. Ahora el servidor PHP de Facebook funciona perfectamente con Asetic pero cada vez encuentro menos razones para seguir usando Asetic. Finalmente, el uso de Gruñido, un complemento basado en Nodo JS, impulsa a la mayoría de los desarrolladores a usar Cenador, otro complemento para administrar dependencias. hablaremos de Cenador más bajo. Echemos un vistazo rápido a los pros y los contras.

Atención ! Antes de comenzar a migrar su aplicación, le aconsejo que versione su código y realice algunas pruebas. Se recomienda encarecidamente leer el artículo completo antes de embarcarse en esta misión a largo plazo.

Introducción

Assetic, el amigo incomprendido

Por mi parte, considero queAsetic es mal entendido y mal utilizado. Te explicaré mis pensamientos. (Además, corregí este artículo después de un malentendido de mi parte, gracias a Manuel Klein por sus comentarios).

Beneficio

El uso deAsetic le permite cancelar el caché en los recursos porque el nombre de los recursos JS y CSS generados cambia cada vez que ejecuta el comando "activo: volcado”. ¡Una cierta ventaja!

Inconvenientes
  • Assetic ofrece pocas opciones para configurar cómo se generan los recursos.
  • Es necesario instalar paquetes de PHP para generar recursos exóticos como LESS. El código PHP está instalado en el vendedores mientras que esta tarea solo es útil para el cliente. No para el servidor. Además, aumenta el número de tu proyecto.
  • Código PHP es necesario en el plantillas Ramita utilisant Asetic o casi todos. Mientras que con Grunt, el recurso compilado se llamará por el nombre que le diste.

Usa de verdad Assetic en tus plantillas

A menudo veo en el plantillas Ramita con los que me encuentro, recursos vinculados a veces a través de Asetic, a veces a través de la activos de Sinfonía.

1
2
3
4
5
# Usando Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Assetic sin usar, usando activos
/bundles/namespacemy/css/main.css

En el primer caso, Asetic realmente se aplica. En el segundo caso, Asetic queda completamente oculto para no utilizar el activos de Symfony. El uso de activos también es un error en mi opinión, al menos para acceder a los recursos JS y CSS. Fin del paréntesis...

Grunt JS el compilador tan flexible!

GruntJS descansa sobre Node.js. Es una herramienta del lado del cliente que utiliza módulos para realizar muchas acciones, como la concatenación de archivos, minimización, compresión de imágenes, compilación de LESS, TypeScript… A diferencia de Asetic, tendrá que establecer ciertas configuraciones, pero tenga la seguridad de que esta inversión inicial dará sus frutos y, al final, mucho más rápido queAsetic.

Introducción a Bower, el composer.json de recursos

GruntJS es bueno y viene a colocarse en el mismo segmento queAsetic. Pero mientras uses Node.js, también uso Cenador ! Es un administrador de dependencias. En pocas palabras, define los recursos que necesita, "dicha biblioteca en tal versión" y Cenador se encarga de obtener la versión que desea. Por supuesto, al igual que composer.json para PHP, puede agregar rangos de versión. Si desea una biblioteca en la versión 3.3., *Cenador obtendrá la última versión disponible. Una solución para actualizar fácilmente estos recursos. Un problema recurrente en nuestros proyectos estándar porque tenemos (¡teníamos!) una tendencia a descargar una versión y nunca actualizarla después. No teníamos las actualizaciones menores que a veces son tan útiles.

Técnicamente, Cenador utiliza el archivo bower.json. Su sintaxis es muy simple. Le insto a que lo use incluso si puede continuar sin él. El archivo necesitará ser versionado a diferencia de los recursos que Cenador vendrá descarga para usted. Para empezar, te daré un ejemplo a continuación.

Control de versiones de recursos compilados

Por mi parte, me había acostumbrado a no versionar mis recursos compilados para Asetic pero decidí hacer lo contrario para GruntJS. Ya que prescindo de recursos para gestionar por Cenador (ver Introducción a Cenador), compilaré mis recursos y gitters. De esta manera, puedo implementar rápidamente mi aplicación. Nunca he tenido comentarios sobre esta práctica pero me parece respetable porque se cancelan dos operaciones en el momento del despliegue (recuperación de recursos con Cenador y compilar con GruntJS), así como la necesidad de tener Node.js en su máquina.

Eliminar Assetic de nuestro proyecto Symfony

Asetic fue elegido para ser el componente predeterminado responsable de compilar recursos. Tenga en cuenta que, a pesar de todo, es muy fácil de quitar.

Eliminar bloques Ramita Tipo javascript et Hoja de estilo. No son necesarios. Mantenga a un lado los archivos que estaba usando. En el futuro, los archivos que le gustaría usar se definirán en el archivo gruntfile.js. Eso lo veremos un poco más adelante.

1
2
3
4
5
6
7
8
# aplicación/config/config.yml
# Eliminar configuración de activo. También habrá algunos en config_prod.yml, config_dev.yml y otros archivos cargados
activo:
depurar: “%kernel.depuración%”
usar_controlador: false
manojos: []
filtros:
cssreescribir: ~
1
2
3
4
5
#app/AppKernel.php
# Deje de cargar AsseticBundle eliminando la línea de AppKernel
...
nueva SymfonyBundleAsseticBundleAsseticBundle()
...
1
2
3
4
5
# compositor.json
# Eliminar paquete activo
...
“Symfony/paquete activo”: “~2.3”
...

Ahí lo tienes, te has desactivado Asetic globalmente. De esta manera, ya no espere encontrar el comando activo: volcado et activo: reloj.

¿Cómo funcionará Grunt JS dentro de nuestro proyecto?

Tendremos que configurar nuestro proyecto con tres archivos:

  • package.json que nos permitirá instalar los plugins Node.js (GruntJS y sus contribuciones);
  • jardineria.json informar sobre las dependencias a resolver para compilar nuestros recursos;
  • gruntfile.js en el que trabajará más. Contendrá todas las acciones posibles y/o a realizar para compilar parte o la totalidad de su proyecto.

paquete.json para instalar Grunt JS

1
2
3
4
5
6
7
8
9
10
11
{
"dependencias": {
"gruñido": “^0.4.5”,
"grunt-contrib-less": “~0.11.0”,
"gruñido-contrib-uglify": “^0.6.0”,
"carga-grunt-tareas": “^0.6.0”
},
"Dependencias de desarrollo": {
"gruñido": “^0.4.5”
}
}

Primero, usa este contenido. Requiere la instalación de GruntJS y contribuciones, dos de las cuales (gruñido-contribuir-menos et gruñido-contribuir-feo) le permitirá compilar sus archivos y archivos JavaScript Menos.

bower.json para resolver mis dependencias (bootstrap, font-awesome, …)

1
2
3
4
5
6
7
8
9
10
11
12
{
"ignorar": [
“**/.*”,
"módulos_nodo",
“componentes_bower”,
"Prueba",
"pruebas"
],
"dependencias": {
"oreja": “3.3.*”
}
}

Aquí hay un archivo mínimo. En mi caso, solicité que la última versión de la rama 3.3 de Bootstrap ser descargado Por defecto, cuando haces una instalación de glorieta sus dependencias se instalarán en la carpeta Bower_components. Mediante el uso de .bowerrc puede cambiar la carpeta de destino. Puede encontrar más información en el sitio web de Bower.

1
2
# Instalar dependencias usando Bower
$ instalación de glorieta

Gruntfile.js – Donde todo comienza

Todos los comandos y acciones que le gustaría agregar ese hecho en el archivo gruntfile.js. Entre otras cosas, puede compilar archivos menos et Sass, concatenar cualquier tipo de archivos, compilar Mecanografiado, minificador Archivos JavaScript, imágenes y archivos HTML. También puede cambiar el tamaño de las imágenes y copiar archivos (como fuentes).

Hoy solo les mostraré cómo compilar archivos .menos y minificar archivos . Js. Acciones que realizo todos los días y que me permiten hoy usar fácilmente tal o cual parte de bootstrap. En lugar de usar todo bootstrap cuando todo lo que necesitas es glifos, puede ser interesante trabajar en una biblioteca personalizada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
módulo.exportaciones= función (gruñido) {
exigir('cargar-grunt-tareas')(gruñido);
gruñido.initConfig({
menos: {
dist: {
opciones: {
comprimir: verdadero,
yuicomprimir: verdadero,
optimización: 2
},
archivos: {
“web/css/principal.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Espacio de nombres/MyBundle/Resources/public/css/main.less”
]
}
}
},
afear: {
opciones: {
desaparecido: false,
fuenteMapa: verdadero
},
dist: {
archivos: {
'web/js/principal.js': [
'src/Espacio de nombres/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
gruñido.registrarTarea('defecto', ["menos", "afear"]);
};

Aquí hay un archivo que funciona perfectamente. También lo uso en un proyecto con poco marco Porque es un API. Asetic fue en mi caso bastante inútil. Así que preferí prescindir de él para usar una herramienta externa al servidor y entregar los recursos perfectamente construidos en el momento del despliegue.

Describamos las acciones para Gruntfile.js

En el archivo anterior, configuro las dos contribuciones de GruntJS (_menos _y afear) que instalé gracias a mi package.json. Notará que los complementos se distinguen fácilmente entre sí. Tomemos el caso de la extensión menos.

cada aporte Gruñido que va a utilizar debe declararse a través de una palabra clave definida para la contribución. ejemplo, para gruñido-contribuir-menos la palabra clave es menos. Bajo esta parte, podemos definir tiene como objetivo. Bajo el término objetivo entender subparte. En un caso concreto, podríamos definir un objetivo bootstrap para compilar la biblioteca del mismo nombre desde la fuente menos. Podríamos definir otro conjunto dist para compilar las fuentes de nuestro proyecto. El uso de varios subconjuntos no es una necesidad, pero tendrá la oportunidad de usarlos más adelante cuando use el reloj de contribución para ganar tiempo.

Entonces la estructura de los subconjuntos de la misma extensión son ISO. En Contrario, la estructura de cada contribución es diferente. Las contribuciones estándar a menudo se presentan con muchos ejemplos. Los complementos oficiales están disponibles en el repositorio de GitHub.

Volvamos a nuestro ejemplo y la configuración de la compilación de nuestros archivos. .menos. En el juego archivos agregamos el nombre de los archivos finales como clave y como valor, una matriz de archivos de entrada para compilar. Creo que no hace falta detallar más porque la sintaxis es bastante intuitiva.

La contribución afear utilizado para la concatenación, minificación y compresión de archivos JavaScript, utiliza la misma estructura. En este caso, es bastante sencillo utilizar sus dos contribuciones.

El arte de compilar

Y ahora compensaciónilons nuestras fuentes. Con Asetic, ejecutamos este comando:

1
aplicación php/consola de activos: volcado

Ahora hemos eliminado Paquete de activos. Ya no tenemos este pedido. Así que vamos a ejecutar nuestro complemento desde Nodo.

1
gruñido

Verás, todavía no es muy complicado... En este caso, las tareas que se ejecutarán serán las dadas para el perfil. predeterminado. Se definió en la última línea.

1
gruñido.registrarTarea('defecto', ["menos", "afear"]);

Tendrías muy bien definido un perfil javascript quien no hubiera ejecutado afear.

1
gruñido.registrarTarea('javascript', ['afear']);

En caso de que pudieras haber ejecutado el comando Gruñido con el nombre del perfil después.

1
gruñido javascript

Puedes definir tantos perfiles como quieras. En el caso de mi perfil javascript, el interés es menor porque también podrías haber hecho la siguiente llamada.

1
gruñido feo

Conclusión

Ahora ya sabe cómo compilar sus recursos. Si no ha captado todas las sutilezas, debería poder apreciar rápidamente toda la flexibilidad que ofrece Gruñido con respecto aAsetic. Además, aparte de los recursos típicos como javascript y css, también puedes procesar fuentes, imágenes... Una baza que me convenció rápidamente.

La verdadera ventaja de Gruñido es su flexibilidad su uso. Gruñido et Cenador entre ellos encarna una alternativa a Assetic. Sin Cenador todavía puedes trabajar con Gruñido pero la experiencia no será total.

Espero que este artículo le permita comprender fácilmente el uso de Gruñido. ¡Sé valiente, ya casi estás allí!

★ ★ ★ ★ ★