Combinar y minificar múltiples archivos CSS/JS

Question

Estoy tratando de optimizar el rendimiento de un sitio al consolidar y comprimir los archivos CSS y JS. Mi pregunta es más acerca de los pasos (concretos) sobre cómo lograr esto, dada una situación real que estaba enfrentando (aunque también debería ser típica entre otros desarrolladores).

Mis referencias de página varios archivos CSS y JS como la siguiente:

<!-- 
    It's easier to work on smaller files during development. 
    Hence, the multiple CSS and JS files. 
--> 
<link type="text/css" rel="stylesheet" href="/css/main.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" /> 

<script type="text/javascript" src="/scripts/js/main.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script> 

Para la versión de producción, me gustaría combinar los archivos CSS 3 en uno y minify usando, por ejemplo, YUI Compressor. Pero entonces, necesitaría actualizar todas las páginas que necesitan estos 3 archivos para hacer referencia al CSS recientemente minificado. Esto parece propenso a errores (por ejemplo, está eliminando y agregando algunas líneas en muchos archivos). ¿Algún otro enfoque menos arriesgado? El mismo problema para los archivos JS.

Answer 1

Terminé usando CodeKit para concatenar mis archivos CSS y JS. La característica que encuentro realmente útil es la capacidad de hacer la concatenación al guardar archivos; porque supervisa los activos respectivos de CSS/JS. Una vez que los combiné correctamente, p. Ej. a 1 CSS y 1 archivo JS, todos los demás archivos pueden referirse a estos 2.

Incluso puede pedirle a CodeKit que realice una minificación/compresión sobre la marcha.

Descargo de responsabilidad: No estoy afiliado de ninguna manera con CodeKit. Al azar lo encontré en la web y me ha servido como una gran herramienta en mi proceso de desarrollo. También viene con buenas actualizaciones desde que lo usé por primera vez hace más de un año.

Answer 2

Eche un vistazo a minify - le permite combinar múltiples archivos js, css en uno simplemente apilándolos en una url, p.

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script> 

Lo hemos utilizado durante años y lo hace sobre la marcha (no es necesario editar archivos).

Answer 3

Creo que el YUI Compressor es el mejor que hay. Minimiza JS y CSS e incluso elimina aquellas declaraciones console.log que las personas utilizan para la depuración de JavaScript de bajo nivel.

Check out how easy it is.

Puede iniciarlo en una tarea ant y, por lo tanto, incluirlo en sus anotaciones post/pre commit si usa svn/git.

ACTUALIZACIÓN: Hoy en día yo uso ronco con el concat, Minify & afear contribuciones. Puede usarlo con un observador para que cree nuevos archivos minifed en el fondo cada vez que cambie su fuente. El contrib uglify no solo elimina los registros de la consola, sino que también elimina las funciones y propiedades no utilizadas.

Ver this tutorial para una breve visión.

ACTUALIZACIÓN: Hoy en día la gente un paso atrás de su predecesor und ronco "trago" y utilizar la NGP como una herramienta de construcción. Lea sobre él here.

Answer 4

Necesitaría actualizar todas las páginas que necesitan estos 3 archivos para hacer referencia al CSS recientemente minificado.

En primer lugar diría que debería tener un encabezado común. Por lo tanto, no será necesario cambiar todos los encabezados en todo momento siempre que sea necesario. Es una buena práctica tener un solo encabezado o 2-3. Entonces, como su página lo necesite, puede cambiar su encabezado. Entonces, cuando quiera extender su aplicación web, será menos arriesgado y tedioso.

No ha mencionado sus entornos de desarrollo. Puede ver que hay many compressing tools listed for different environments. Y está utilizando una buena herramienta, es decir, el compresor YUI.

Answer 5

No veo que menciones un sistema de gestión de contenido (Wordpress, Joomla, Drupal, etc.) pero si estás usando cualquier CMS popular todos tienen complementos/módulos disponibles (opciones gratuitas también) que minimizarán y almacenarán en caché tu CSS y js.

El uso de un complemento le permite mantener las versiones sin comprimir disponibles para su edición; luego, cuando se realizan cambios, el complemento incluye automáticamente los cambios y vuelve a comprimir el archivo. Solo asegúrese de elegir un complemento que le permita excluir archivos (como un archivo js personalizado) en caso de que se rompa algo.

He intentado en el pasado mantener estos archivos manualmente y siempre se convierte en una pesadilla de mantenimiento. Buena suerte, espero que esto te ayude.

Answer 6

Si está realizando un procesamiento previo en los archivos que sirve, probablemente desee configurar un sistema de compilación adecuado (por ejemplo, un Makefile). De esta manera, tiene algunos archivos fuente sin duplicación, y cada vez que realiza un cambio, ejecuta 'make' y actualiza todos los archivos generados automáticamente. Si ya existe un sistema de compilación, aprende cómo funciona y úsala. Si no, deberás agregar uno.

Primero, descubra cómo combinar y minificar sus archivos desde la línea de comandos (la documentación de YUICompressor lo cubre). Designe un directorio para material generado automáticamente, separado de las cosas en las que trabaja, pero accesible para el servidor web, y envíelas a allí, por ejemplo, gen/scripts/combined.js. Coloque los comandos que utilizó en un Makefile y vuelva a ejecutar "make" cada vez que realice un cambio y desee que surta efecto. Luego actualice los encabezados en otros archivos para apuntar a los archivos combinados y minificados.

Answer 7

Para las personas que quieren algo un poco más ligero y flexible, he creado js.sh hoy para solucionar este problema. Es una herramienta de línea de comandos simple dirigida a los archivos JS que también podría modificarse fácilmente para cuidar los archivos CSS. Beneficios:

• fácilmente configurable para su uso por varios desarrolladores en un proyecto
• Combina archivos JS en el orden especificado en script_order.txt
• los comprime con Closure Compiler de Google
• Splits JS en < 25kb trozos donde sea posible, ya que el iPhone no guardará en la memoria caché nada mayor que 25kb
• Genera un pequeño archivo PHP con etiquetas <script> que puede incluir, donde corresponda
• Uso: js.sh -u yourname

Se podría usar algunas mejoras, pero es mejor para mi caso de uso de todas las otras soluciones que he visto hasta ahora.

Answer 8

El primer paso de la optimización es la minimización de archivos. (Recomiendo encarecidamente GULP para minimizar y optimizar. Su solución de reloj simple, instalación y todos los archivos se comprimen a la vez. Admite todos los CSS, JS, menos, sass, etc.)

o solución de la vieja escuela:

1) En general, como un proceso de optimización, para optimizar el rendimiento del sitio, pruebe la fusión de todos los CSS en un archivo y comprimir archivos mediante Compass. De esta forma, sus múltiples solicitudes de CSS estático se reemplazarán por una sola.

2) Problema de múltiples JS que puede resolver usando CDN (o Google Hosted Libraries) para que las solicitudes vayan a otro servidor que no sea el suyo. De esa manera, el servidor no espera a que se complete la solicitud anterior antes de enviar el siguiente.

3) Si tiene su propio JavaScript almacenado localmente, minimice cada archivo utilizando el complemento Brackets "Comprimir JavaScript". Básicamente es un clic para comprimir JavsScript. Brackets es un editor gratuito creado para CSS y JS, pero se puede utilizar para PHP y otros idiomas. Hay una gran cantidad de complementos para elegir, tanto para los desarrolladores de aplicaciones para el usuario como para el programa de fondo. En general, "un clic" para hacer todos estos comandos (hasta ahora múltiples). Por cierto, Brackets reemplazó mi muy caro Dreamweaver;)

3) Intente utilizar herramientas como Sass, Brújula, less para minimizar su CSS.

Nota: Incluso sin usar SASS mezclando o variables, su CSS se comprimirá (simplemente use CSS puro y Compass el comando "ver" lo comprimirá por usted).

Espero que esto ayude!

Answer 9

En mi proyecto Symfony que hacer algo como esto

{# layout.html.twig #} 

{% block styles %} 
    {% if app.environment == 'prod' %} 
     <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" /> 
    {% else %} 
     <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" /> 
     <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" /> 
    {% endif %} 
{% endblock %} 

{# some-view.html.twig #} 

{% extends 'AppMainBundle::layout.html.twig' %} 

{% block styles %} 
    {{ parent() }} 

    {% if app.environment != 'prod' %} 
     <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" /> 
    {% else %} 
{% endblock %} 

Cuando la versión dev está listo para la producción, uso this script combinar todos los archivos CSS y reemplazar el contenido de min.css.

Pero esta solución solo funciona si se incluyen los mismos archivos css en todas las páginas.

Answer 10

Es 2015 años en la calle y la forma más fácil de usar es imo gulp - http://gulpjs.com/. Minificando código usando gulp-uglify para scripts js y gulp-minify-css para css es muy simple. Gulp es definitivamente vale la pena de intentar

Answer 11

Usted puede utilizar el módulo cssmin nodo que se construye desde el famoso compresor YUI

$ npm -g i cosmiC# install 

# Usage 
var puts = require('util').puts, 
fs = require('fs'), 
cssmin = require('./cssmin'); 
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8'); 
var min = cssmin(css); 
puts(min); 

Answer 12

Consejo rápido para los usuarios de Windows, si sólo desea concat archivos:

Abra un cmd en el lugar deseado, y justo tubería sus archivos a un archivo usando "tipo"

ejemplo:

type .\scripts\*.js >> .\combined.js 

Si el orden de las secuencias de comandos es importante, que tiene que escribir explícitamente los archivos, en el orden deseado.

utilizo este en un archivo bat para mis proyectos angulares de arranque/

del combos.js 

type .\lib\jquery.min.js >> .\combos.js 
type .\lib\bootstrap.min.js >> .\combos.js 
type .\lib\Angular\angular.min.js >> .\combos.js 
type .\lib\Angular\angular-route.min.js >> .\combos.js 
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js 

type .\app.js >> .\combos.js 
type .\services\*.js >> .\combos.js 
type .\controllers\*.js >> .\combos.js 

Answer 13

Todos los servicios más rápidos se encuentran aquí

http://www.code-stuff.net 
http://www.code-stuff.net/HttpUtility 
http://www.code-stuff.net/HttpUtility/minifyCSS 
http://www.code-stuff.net/HttpUtility/stringify_json