¿Qué debo usar para combinar automáticamente archivos css / js?

Soy consciente de las ruedas dentadas para combinar archivos javascript, pero no lo he probado. ¿Cuáles son algunas otras opciones y cómo se comparan?

Escribí un controlador para Asp.Net que usa YUI para comprimir, concatenar y almacenar en caché la salida.

Aquí está la fuente: http://gist.github.com/130913

Ya he abordado este problema en otra pregunta

En retrospectiva, debería haberlo preguntado en Webmasters en lugar del sitio de Programadores.

Tienes 3 opciones:

1. Deje que su marco lo maneje automáticamente
2. Deje que su servidor web lo maneje automáticamente
3. Tira tu propia opción para hacerlo manualmente

Opción 1 (usando una extensión CakePHP):

Descargue e instale AssetPacker en su sitio (que también requiere jsmin y CSSTidy). Modifique sus pocas líneas de origen que incluyen los archivos js. Lavar-> Enjuagar-> Repetir. Voila, el resto se hace automáticamente por ti.

Si usa algún otro marco, lo más probable es que haya una herramienta que lo logre por usted. Es un requisito bastante común en el mundo webdev.

Opción 2 (usando un mod de Apache):

Echa un vistazo al mod de Google Pagespeed para Apache . Hace todo lo que usted describe y mucho más.

Sin embargo, asegúrese de monitorear los recursos de su servidor de producción. Algunas personas han estado viendo problemas en los que esto aumenta la carga en su servidor de manera negativa. No soy positivo, pero puede requerir una estrategia de contenido estático suficiente para ser una opción efectiva.

Opcion 3:

Si realmente quieres, puedes crear algo de magia PHP que concatene el lado del servidor de archivos JS y combine todos los enlaces en uno, pero ... Eso es exactamente lo que las dos estrategias ya están haciendo de todos modos.

Personalmente, desaconsejaría esta opción.

Por lo que sé, Sprockets concatena archivos JS de la misma manera que AssetPacker, solo se implementa como Ruby Gem. Lo que no hace es minificar el código js. Entonces, si lo usa, probablemente sea una buena idea agarrar la gema jsmin también. Para obtener información sobre cómo usar Sprockets + JSMin en CakePHP, consulte esto .

Sé que pongo énfasis en CakePHP pero ... supongo que, si un complemento se puede adaptar a CakePHP, también debería ser trivial adaptarlo a un marco diferente.

Una búsqueda rápida en Google encuentra esto para combinar archivos CSS: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

¿Estás seguro de que quieres combinarlos? Si usa una biblioteca común, puede aprovechar una CDN para entregar sus javascripts. Luego puede aprovechar el almacenamiento en caché del navegador (suponiendo que otros sitios estén usando el mismo CDN) y la entrega distribuida. Microsoft y Google tienen soluciones (sinceramente, tampoco las he usado, pero ciertamente voy a comenzar) y puede haber otras.

Para los proyectos ASP.NET, lo hice parte de mi proceso de compilación basado en las instrucciones de Karl Seguin .

Karl lo describe mejor en su blog, pero la versión corta es configurar una aplicación de consola que envuelva YUICompressor. Luego, puede configurar una tarea posterior a la compilación para llamar a esa aplicación de consola contra la ubicación de los archivos JS en su sitio.

Si su aplicación web está en PHP, debería considerar usar minify :

Combina múltiples archivos CSS o Javascript, elimina espacios en blanco y comentarios innecesarios, y los sirve con codificación gzip y encabezados óptimos de caché del lado del cliente.

Para este conocimiento, Python podría ser realmente útil. Puedes aprender Python bastante rápido. Comencé hace aproximadamente 2 semanas y mi primera aplicación (que aún no está terminada) hará exactamente lo mismo que usted desea. Al igual que el compilador DotLess, tendrá una función de observación que examinará los archivos o directorios y, si cambian, generará un nuevo archivo.

Python también es ideal para otras tareas de mantenimiento y leí a muchos administradores de sistemas que les gusta usarlo.

He creado Minifpy : una herramienta writed en python3 (Mac OS, Windows y Linux) para fusionar y Minify JS y CSS de archivos mediante el uso de Python.

Minifpy utiliza un archivo de configuración JSON muy fácil para definir qué archivos deben fusionarse, minimizarse o no:

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

También puede usar esta herramienta en la CLI.

Minifpy detecta cualquier modificación en los archivos JS / CSS y las combina / minimiza automáticamente (útil para el desarrollo).