Estoy tratando de descubrir cómo minimizar y combinar el código js/css dada esta situación:
- Compré un tema, no lo desarrollé
- Estoy usando varios complementos. Son útiles, pero generan un código muy feo (mucho CSS y js en línea, principalmente código de desarrollo con comentarios completos)
Soy bastante nuevo en gruñir, lo he usado en el pasado con aplicaciones web personalizadas, pero nunca con wordpress, me pregunto si puede ayudar cuando tienes muchos scripts / complementos de PHP que inyectan su código feo.
Entonces mi pregunta es: ¿hay alguna manera de hacer que grunt funcione con wordpress para que el código de producción se sirva en el caso anterior? ¿Si es así, cómo?
Me temo que no hay forma de lograr lo que está buscando sin modificar esos complementos.
Grunt es solo un ejecutor de tareas de JavaScript: no tiene sentido de una aplicación web, ya sea WordPress o algo personalizado. Le das una entrada a Grunt, le dices qué hacer con esa entrada y lo hace. Por lo tanto, para usar Grunt para minimizar y concatenar todo el JavaScript y CSS en su sitio, debe extraerlo de los complementos y colocarlo en una estructura de archivo adecuada.
En términos generales, cuando un complemento insiste en insertar un montón de JavaScript y/o CSS, no es un complemento muy bueno. Por ejemplo, mi equipo usa gulp.js (similar a Grunt) para una gran cantidad de desarrollo front-end de WordPress (concatenación, minificación, huellas dactilares, prefijos automáticos, etc.), y somos muy particulares con respecto a los complementos que usamos ( si es que hay alguna), una de las razones es exactamente de qué se trata su pregunta.
vorillaz
Tu plan parece un poco desordenado. En el mejor de los casos, supongamos que ha configurado y utilizado una tarea Grunt simple para minimizar todo su CSS y JS que utiliza su instancia de WordPress.
Eso significa que debe profundizar en su código, encontrar dónde cada uno de sus complementos obtiene estilos o scripts, cortarlos y minimizarlos usando Grunt. Luego, debe tomar el archivo minificado final e inyectarlo nuevamente en su instancia de WordPress.
Además del hecho de que tendrá que hacer mucha codificación personalizada, actualizar sus complementos le causará mucho dolor.
Para apegarse a un plan escalable y fácil de seguir, sugiero usar Complemento minificar BWP que se encargará de sus estilos y scripts, proporciona soporte para CDN.
Luego puede usar Grunt como un mecanismo de control de calidad del código. Uncs es una gran herramienta que le ayuda a encontrar estilos no utilizados. Grunt-usemin es una excelente solución también.
Por último, como veo que está dispuesto a pasar a las herramientas de línea de comandos, le sugiero que eche un vistazo a CLI de WP es una maravillosa interfaz de línea de comandos para WordPress.
Puede usar un complemento para eliminar sus activos o eliminarlos manualmente, luego decirle a grunt que los concatene y minimice.
Este artículo puede darte lo que estás buscando. http://css-tricks.com/take-control-cssjs-wordpress-plugins-load/
-
Tenga en cuenta que este artículo de CSS-Tricks trata principalmente de complementos que agregan JS y CSS archivos – no en línea estilos y guiones, como dice la pregunta. Dicho esto, proporciona excelentes soluciones para lidiar con complementos que insisten en agregar sus propias hojas de estilo y scripts.
– Agop
3 de febrero de 2015 a las 0:10
Si está dispuesto a dedicar el tiempo necesario para separar su JS en módulos, entonces gruñido-navegador podría funcionar bien para usted en el largo plazo. Sin embargo, como ya se mencionó, esto requeriría extraer el código relevante de los archivos de su complemento.
Para la minificación de CSS, grunt-contrib-cssmin valdría la pena echarle un vistazo. también me gusta gruñido-texto-reemplazar para cambiar las rutas relativas en CSS antes de la prueba o la implementación (lo que puede agravar si no está desarrollando directamente a WordPress).
Echa un vistazo al tema FoundationPress-child, usa gruñido y un puñado de otras buenas herramientas y bibliotecas. Lo estoy usando como base para un sitio WP que hice para un cliente mío. Es un buen punto de partida, junto con VCCW.
Específicamente, ¿qué quieres que Grunt haga por ti?
– Alexander O’Mara
25 de enero de 2015 a las 1:33
Creo que quiere que Grunt combine, minimice y comprima estilos y guiones. Esto sería ideal para SCSS o LESS y CoffeeScript o Javascript.
– GALERÍA DE ARTE
28 de enero de 2015 a las 21:11