javascript - control de versiones: cómo controlar las versiones comprimidas/minificadas de css y js entre entornos

Estoy usando git (a través de GitHub) para el control de versiones en mis proyectos. Todavía soy nuevo en esto, pero me gustaría conocer las mejores prácticas sobre cómo mantener sincronizados mis archivos css y js entre entornos.

Ejemplo: Digamos que escribo un script js en dev. Estoy contento con mi trabajo y lo envío a testing. Bueno, en testing querría una versión minificada/comprimida. ¿Cómo lograría eso sin muchas tareas adicionales? ¿Qué hacen ustedes? Supongo que es parte de algún tipo de script de despliegue que comprime el código y lo envía al entorno que especifique.

Esto plantea otra pregunta: ¿Qué pasa con mi(s) archivo(s) header (y/o footer) en mi proyecto? Si mi dev tiene:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.css">

y mi testing tiene:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.min.css">

Eso está bien, pero ¿qué pasa si necesito hacer cambios en mi encabezado? ¿Cómo separaría todas estas cosas entre sí? Si hago cambios en mi encabezado y los envío a pruebas o producción, perdería el .min de esa línea de inclusión.

Actualmente, lo que hago para desplegar actualizaciones es simplemente un git pull origin [branch] desde la línea de comandos dentro del entorno que quiero actualizar.

De nuevo, estoy buscando la mejor práctica, sin importar el aprendizaje que requiera. ¡Gracias!

Respuesta #1

Podrías querer revisar herramientas de preprocesador, como LESS o Sass. Estas herramientas te permiten escribir CSS (creo que también pueden manejar JS, para fines de minificación), y configurar scripts que manejan cómo se compila el código, según el entorno.

Lo que harías, entonces, es escribir tu código en archivos "source" y configurar el preprocesador para compilar el código según las configuraciones establecidas en un archivo de ajustes (para Sass, esto se hace fácilmente con el framework Compass), basado en el entorno en el que te encuentres. Luego, mantendrías solo los archivos fuente en el repositorio (configura Git para ignorar las versiones compiladas) y configurarías hooks post-receive para compilar los archivos fuente en el servidor. Tu HTML luego puede ser escrito para acceder a los archivos compilados (que deberían tener el mismo nombre en todos los entornos), de modo que no tengas que escribir lógica que determine sobre la marcha, cada vez, en qué entorno se ejecuta el código.

Respuesta #2

1. No pongas la versión minimizada de CSS o JS en el control de versiones. Eso es duplicado.

2. Git se puede usar en despliegue, pero su propósito no es desplegar.

3. Para incluir etiquetas CSS, eso es fácil. Un resumen rápido es usar la variable env de tu framework. Según sé, CodeIgniter tiene esta función. Si env == test, incluye la versión minificada, si no, incluye las versiones sin procesar.

Además, necesitas un script de compilación o un complemento de framework para generar versiones minificadas automáticamente.