Combine y minimice varios archivos CSS / JS

Estoy tratando de optimizar el rendimiento de un sitio consolidando y comprimiendo los archivos CSS y JS. Mi pregunta es más sobre los pasos (concretos) sobre cómo lograr esto, dada una situación real a la que me enfrentaba (aunque también debería ser típico entre otros desarrolladores).

Mi página hace referencia a varios archivos CSS y JS como los siguientes:

<!--
  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 3 archivos CSS en uno y minimizarlo usando, por ejemplo, YUI Compressor . Pero luego, necesitaría actualizar todas las páginas que necesitan estos 3 archivos para hacer referencia al CSS recién minificado. Esto parece propenso a errores (por ejemplo, está eliminando y agregando algunas líneas en muchos archivos). ¿Algún otro enfoque menos riesgoso? El mismo problema para los archivos JS.

Echa un vistazo a minify : te permite combinar varios archivos js, css en uno solo apilándolos en una URL, por ejemplo

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

Lo hemos usado durante años y hace un gran trabajo y lo hace sobre la marcha (sin necesidad de editar archivos).

Creo que el compresor YUI es el mejor que existe. Minimiza JS y CSS e incluso elimina las console.logdeclaraciones que la gente usa para la depuración de JavaScript de bajo nivel.

Mira lo fácil que es .

Puede iniciarlo en una tarea de hormiga y, por lo tanto, incluirlo en sus ganchos posteriores / previos a la confirmación si usa svn / git.

ACTUALIZACIÓN: Hoy en día uso grunt con las contribuciones concat, minify & uglify. Puede usarlo con un observador para que cree nuevos archivos minificados en segundo plano cada vez que cambie su fuente. La contribución uglify no solo elimina los registros de la consola, sino que también elimina las funciones y propiedades no utilizadas.

Consulte este tutorial para obtener una breve descripción.

ACTUALIZACIÓN: Hoy en día la gente se aleja de grunt y su predecesor "gulp" y usa npm como herramienta de construcción. Lea sobre esto aquí .

ACTUALIZACIÓN: Ahora la gente usa hilo para ejecutar npm. No es de extrañar; El icono de hilos es un gato. La mayoría de los marcos actuales usan webpack para agrupar los recursos en paquetes, que luego también se encargan de la minificación .

Necesitaría actualizar todas las páginas que necesitan estos 3 archivos para hacer referencia al CSS recién 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 cuando sea necesario. Es una buena práctica tener un encabezado único o 2-3. Entonces, según lo necesite su página, puede cambiar su encabezado. Por lo tanto, siempre que desee ampliar su aplicación web, será menos riesgoso y tedioso.

No ha mencionado sus entornos de desarrollo. Puede ver que hay muchas herramientas de compresión listadas para diferentes entornos . Y estás usando una buena herramienta ieYUI Compressor.

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 el archivo; porque supervisa los activos CSS / JS respectivos. Una vez que los combiné correctamente, por ejemplo, en 1 archivo CSS y 1 archivo JS, todos los demás archivos simplemente pueden hacer referencia 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. Lo encontré al azar 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.

Consejo rápido para usuarios de Windows, si solo desea concatizar archivos:

Abra un cmd en el lugar deseado y simplemente canalice sus archivos a un archivo usando " tipo "

ex:

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

Si el orden de sus scripts es importante, debe escribir explícitamente los archivos, en el orden deseado .

Yo uso esta 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

Es el año 2015 en la calle y la forma más fácil en que en mi opinión es usar gulp - http://gulpjs.com/ . Minificar código usando gulp-uglify para scripts js y gulp-minify-css para css es muy simple. Gulp definitivamente vale la pena intentarlo

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

El uso de un complemento le brinda la capacidad de mantener las versiones sin comprimir disponibles para editar, luego, cuando se realizan cambios, el complemento automáticamente los incluye 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 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.

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

• Fácilmente configurable para que lo utilicen varios desarrolladores en un proyecto
• Combina archivos JS en el orden especificado en script_order.txt
• Los comprime con el compilador de cierre de Google
• Divide JS en fragmentos de <25 kb siempre que sea posible, ya que el iPhone no almacenará en caché nada superior a 25 kb
• Genera un pequeño archivo PHP con <script> etiquetas que puede incluir cuando corresponda
• Uso: js.sh -u yourname

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

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

O solución de la vieja escuela:

1) En general, como un proceso de optimización, para optimizar el rendimiento de un sitio, intente fusionar todo el CSS en un archivo y comprima el archivo usando Compass . De esa manera, sus múltiples solicitudes a CSS estático serán reemplazadas por una sola.

2) Problema de múltiples JS que puede resolver utilizando CDN (o bibliotecas alojadas de Google), por lo que las solicitudes van 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 la siguiente.

3) Si tiene su propio JavaScript almacenado localmente, minimice cada archivo utilizando el complemento de Brackets "Comprimir JavaScript". Es básicamente un clic para comprimir JavsScript. Brackets es un editor gratuito creado para CSS y JS, pero se puede utilizar para PHP y otros lenguajes. Hay muchos complementos para elegir hechos tanto para desarrolladores front-end como back-end. En general, "un clic" para hacer todos estos (hasta ahora varios) comandos. Por cierto, los soportes reemplazaron mi costoso Dreamweaver;)

3) Intente usar herramientas como Sass , Compass, menos para minimizar su CSS.

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

¡Espero que esto ayude!

Si está realizando algún preprocesamiento en los archivos que sirve, probablemente desee configurar un sistema de compilación adecuado (por ejemplo, un Makefile). De esa manera, tiene algunos archivos fuente sin duplicación, y cada vez que hace un cambio, ejecuta 'make' y actualiza todos los archivos generados automáticamente. Si ya existe un sistema de compilación, aprenda cómo funciona y utilícelo. Si no es así, deberá agregar uno.

Entonces, primero, descubra cómo combinar y minimizar sus archivos desde la línea de comando (la documentación de YUICompressor cubre esto). Designe un directorio para las cosas generadas automáticamente, separado de las cosas en las que trabaja pero accesible para el servidor web, y envíe la salida allí, por ejemplo, gen / scripts / mixed.js. Coloque los comandos que utilizó en un Makefile y vuelva a ejecutar 'make' cada vez que haya realizado un cambio y desee que surta efecto. Luego actualice los encabezados en otros archivos para que apunten a los archivos combinados y minimizados.

En mi proyecto Symfony hago 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 de desarrollo está lista para la producción, uso este script para 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.

Puede usar el módulo de nodo cssmin que se construye a partir del 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);

Todas las utilidades más rápidas 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