javascript - attribute - Combine y minimice múltiples archivos CSS/JS

html script src (13)

Tendría que 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 muchas herramientas de compresión enumeradas para diferentes entornos . Y está utilizando una buena herramienta, es decir, el compresor YUI.

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).

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

<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 minificarlo 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.

Comprueba minify : te permite combinar varios archivos js, css en uno simplemente 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 (no es necesario editar archivos).

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

Mira lo fácil que es .

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

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

Vea este tutorial para una breve visión.

ACTUALIZACIÓN: Hoy en día la gente retrocede de grunt y su predecesor "gulp" y usa npm como una herramienta de compilación. Lea sobre esto here .

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 de un sitio, intente fusionar todo el CSS en un archivo y comprimirlo utilizando 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 usando el complemento Brackets "Comprimir JavaScript". Básicamente es un clic para comprimir JavsScript. Brackets es un editor gratuito hecho para CSS y JS, pero se puede usar 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 costoso Dreamweaver;)

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

Nota: Incluso sin utilizar mezclas Sass o variables, su CSS se comprimirá (simplemente utilice el comando puro de CSS y Compass "watch" para comprimirlo).

¡Espero que esto ayude!

En mi proyecto de 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, uso esta secuencia de comandos para combinar todos los archivos css y reemplazar los contenidos de min.css .

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

Es 2015 años en la calle y la forma más fácil en que está usando imo gulp - http://gulpjs.com/ . Minificar el 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 cualquier CMS popular, todos tienen complementos / módulos disponibles (también opciones gratuitas) que minimizarán y almacenarán en caché tus css y js.

El uso de un complemento le permite mantener las versiones sin comprimir disponibles para su edición; luego, cuando se realizan los 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 de forma manual 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, he creado js.sh hoy para resolver 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 ser utilizado por múltiples 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 trozos de <25kb cuando sea posible, ya que el iPhone no almacenará en caché nada mayor a 25kb
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.

Puede usar el módulo de nodo cssmin que está construido 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);

Si está haciendo un procesamiento previo en los archivos que sirve, probablemente quiera 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.

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 he combinado correctamente, por ejemplo, a 1 CSS y 1 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.

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

Sugerencia rápida 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 " tipo "

ex:

type ./scripts/*.js >> ./combined.js

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

Utilizo esto en un archivo bat para mis proyectos angulares / 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