Combinar y Minificar Múltiples archivos CSS / JS

Echa un vistazo minify - te permite combinar múltiples 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 YUI Compressor es el mejor que hay. Minimiza JS y CSS e incluso elimina las sentencias console.log que la gente usa para la depuración de JavaScript de bajo nivel.

Echa un vistazo a lo fácil que es .

Puedes iniciarlo en una tarea ant y por lo tanto incluirlo en tus hooks post/pre commit si usas svn/git.

ACTUALIZACIÓN: Hoy en día uso grunt con las contribuciones concat, minify y uglify. Se puede utilizar con un observador por lo que crea nuevos archivos minifed en segundo plano cada vez que cambia su fuente. uglify contrib no solo elimina los registros de la consola, sino que también elimina las funciones y propiedades no utilizadas.

Ver este tutorial para una breve visión.

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

Tendría que actualizar todas las páginas que necesitan estos 3 archivos para hacer referencia al CSS recién minificado.

En primer lugar yo diría que usted debe tener encabezado común. Por lo tanto, no tendrá que cambiar todos los encabezados en todo momento cuando sea necesario. Es una buena práctica tener un solo encabezado o 2-3. Así como su necesidad de la página usted puede cambiar su encabezado. Así que cada vez que desee ampliar su aplicación web será menos arriesgado y tedioso.

No has mencionado tus entornos de desarrollo. Puedes vea hay muchas herramientas de compresión listadas para diferentes entornos. Y está utilizando una buena herramienta, es decir, compresor YUI.

Es 2015 año en la calle y la forma más fácil imo está utilizando gulp - http://gulpjs.com / . Reducir código usando gulp-uglifypara scripts js y gulp-minify-css para css es muy simple. Gulp definitivamente vale la pena probar

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

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

Ex:

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

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

Utilizo este en un archivo bat para mis proyectos angular/bootstrap

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

No veo que mencione un sistema de gestión de contenido (Wordpress, Joomla, Drupal, etc.), pero si está utilizando cualquier CMS popular, todos tienen plugins/módulos disponibles (opciones gratuitas también) que minimizarán y almacenarán en caché su css y js.

El uso de un plugin le da la capacidad de mantener las versiones sin comprimir disponibles para la edición, a continuación, cuando se realizan cambios el plugin incluye automáticamente los cambios y vuelve a comprimir el archivo. Solo asegúrese de elegir un plugin que le permitirá 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 ayude.

Para las personas que quieren algo un poco más ligero y flexible, he creado js.sh hoy para abordar este problema. Es una herramienta de línea de comandos simple dirigida a archivos JS que podrían modificarse fácilmente para cuidar de los archivos CSS también. 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 el Compilador de cierre de Google
• Divide JS en
• Genera un pequeño archivo PHP con etiquetas <script> que puede incluir cuando corresponda
• Uso: js.sh -u yourname

Podría usar 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 solución de reloj simple, instalación y todos los archivos se comprimen a la vez.Soporta 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 todos los CSS en un archivo y comprimir el archivo utilizando Compass. De esa manera sus múltiples solicitudes a CSS estático será reemplazado por uno solo.

2) Problema de múltiples JS que puede resolver utilizando CDN (o Bibliotecas alojadas en Google) para que las solicitudes vayan a otro servidor no 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 Brackets plugin "Compress JavaScript". Es básicamente un clic para comprimir JavsScript.Brackets es un editor libre hecho para CSS y JS pero puede ser utilizado para PHP y otros lenguajes. Hay un montón de plugins para elegir hecho para los desarrolladores de front-end y back-end. En general "un clic" para hacer todos estos (hasta ahora múltiples) comandos. Por cierto, los soportes reemplazaron a mi muy caro Dreamweaver;)

3) Intenta usar herramientas como Sass, Compass, less para minimizar tu CSS.

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

Espero que esto ayude!

Si está haciendo 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 de origen sin duplicación, y cada vez que realiza un cambio, ejecuta 'make' y actualiza todos los archivos generados automáticamente. Si ya hay un sistema de construcción en su lugar, aprenda cómo funciona y úselo. Si no, tendrás que agregar uno.

Así que primero, averigua cómo combinar y minificar tus archivos desde el comando line(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 la salida a allí, por ejemplo, gen/scripts/combined.js. Ponga los comandos que usó en un Makefile, y vuelva a ejecutar 'make' cada vez que haya hecho un cambio y quiera que surta efecto. A continuación, actualice los encabezados de otros archivos para que apunten a los archivos combinados y minificados.

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 dev está lista para producción, utilizo 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