Tengo un documento .html con CSS y Javascript dentro del documento (sin archivos externos). ¿Hay alguna herramienta en línea que minify documento y Javascript a un tamaño muy pequeño? Vi muchas secuencias de comandos como ilegibles, donde todas las variables y los nombres de las funciones se reemplazan por nombres de una letra, etc. Consejo.¿Cómo minimizar HTML con CSS y Javascript?
Editar 2 (22 Feb, 2017): Ahora, la mejor herramienta para minify sus activos (y mucho más, agregando cargadores y complementos) es definitivamente Webpack.
Ejemplo de configuración para mover todos sus .css en un archivo y minify que:
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
}
]
}
Edición 1 (septiembre 16 de, 2014): Incluso mejor, ahora que tienen corredores de tareas como Gulp o Grunt.
corredores de tareas son pequeñas aplicaciones que se utilizan para automatizar muchas de la consume, aburrido (pero muy importante) las tareas que hay que hacer mientras el desarrollo de un proyecto de tiempo. Esto incluye tareas como ejecutar pruebas, concatenar archivos, minificación y preprocesamiento de CSS. Por simplemente creando un archivo de tarea, puede indicarle al corredor de la tarea que se encargue automáticamente de cualquier tarea de desarrollo en la que pueda pensar mientras hace cambios en sus archivos. Es una idea muy simple que le ahorrará mucho tiempo y le permitirá mantenerse enfocado en el desarrollo de .
deben leer: Getting started with Gulp.js
Ejemplo de tarea con la concatenación de JavaScript y minimización (y JSHint):
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
original (jul 19 de de 2012): Aconsejo el HTML5 Boilerplate Build Script que puede minificar su JS y CSS.
Pero los miniaturas de JavaScript no cambiarían los nombres de las funciones a nombres de una sola letra si el documento los utiliza, como 'onload = "pageLoad" '- luego' pageLoad' permanece: -/ –
Algunos minificadores tienen la opción de seleccionar si se minan o no los literales/nombres de funciones/nombres de variables. –
Pero hasta ahora siempre he encontrado minificadores no complejos. Me gustaría utilizar algunos que se ocupen de todas las partes: js, css, html –
Buen compresor de javascript es también Google's Closure Compiler y viceversa, para hacer que el código comprimido sea un poco mejor legible puede usar Javascript Beautifier. También puede echar un vistazo al proyecto phpEasyMin.
nunca se ha intentado pero han oído real de buenas críticas de Cierre compiler..You de Google pueden querer probarlo
Mientras que el código JavaScript se puede comprimir y descomprimir dentro de JavaScript (ver otras respuestas), es realmente difícil lograr el mismo resultado en CSS.Actualmente no existe una herramienta que haga más que eliminar los espacios en blanco innecesarios (consulte también Are there any agressive CSS Minification tools?), ya que los nombres de los identificadores y las clases no pueden modificarse sin destruir el vínculo entre HTML y CSS.
Además, no puede eliminar nada del marcado HTML, excepto los espacios en blanco. Bueno, podrías minificar los nombres de clase y el identificador, pero actualmente no hay ninguna herramienta que actualice esos valores minificados en tus archivos CSS/JS, por lo que esto haría que tu sitio web sea feo y roto. E incluso elementos vacíos a menudo son necesarios para obtener algunos efectos de CSS correctos (sí, te estoy mirando, IE6). Esto también se aplica a los nombres de funciones de JavaScript.
TL; DR: Desafortunadamente no hay una herramienta todo en uno para minify-everything. Lo más cercano es htmlcompressor.
Lo que esperaría es reemplazar nombres de funciones en html y luego también en Javascript. Por ahora, por ejemplo, si tiene 'onload = pageLoad', este nombre de función se mantendrá en ese tamaño, pero sería bueno reemplazarlo por un nombre corto (una o dos letras). Entonces hay algo de compresión de potentilal más allá del espacio en blanco ... –
Bueno, básicamente es el mismo problema con CSS/HTML: tienes que cambiar los nombres de las funciones en todas partes y estar atento a las colisiones. – Zeta
Me temo que tendrá que hacerlo en dos pasos:
Hace un tiempo tuve una pregunta similar (sobre objetos globales y claves de objetos). La respuesta que obtuve fue que ninguna herramienta hará suposiciones sobre el contexto global. En su ejemplo, no minimizarán "pageLoad" porque podría ser utilizado por otro fragmento html o js que no proporcionó.
Una solución en su ejemplo sería hacer la función pageLoad local y añadir el proceso de carga de forma dinámica en el guión:
elt.onload=function(){pageLoad();};
+1 :: buen punto con onload dinámico - gracias –
Closure compiler se ha recomendado correctamente para JS; pero no muchos son conscientes de Google Closure stylesheets. Una de las características de hojas de estilo de cierre es el cambio de nombre, donde
<style>
.descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
<p class="descriptive-element-class-name">Lorem ipsum</p>
<p class="descriptive-element-class-name">Lorem ipsum</p>
</div>
se convertiría en
<style>
.a-b .a-c {color:red;}
</style>
<div class="a-b">
<p class="a-c">Lorem ipsum</p>
<p class="a-c">Lorem ipsum</p>
</div>
Habrá más minimización también; y dado el hecho de que OP indica que todos los recursos están incluidos en el html, esto puede terminar ahorrando bastante en la sobrecarga de tráfico.
NB: Si inspecciona cualquier página de resultados de Google, verá sus nombres de las clases y de identificación son casi nunca más de 4 caracteres aleatorios
Prueba http://prettydiff.com/. Ofrece detección automática de idioma y puede minificar html, css y javascript. Esta herramienta supone que las etiquetas de script sin un tipo de mime o con un tipo de mime relevante para javascript deben contener javascript o nada. Del mismo modo, se presume que las etiquetas de estilo sin tipo mime o con el tipo mime "text/css" contienen CSS. El CSS y JavaScript se minimizan en consecuencia. La herramienta en sí está escrita en javascript. No hay ninguna razón por la que deba usar más de una herramienta.
No cambia el nombre para clases de ejemplo, etc. - haciendo eso (si ...) haría el resultado mucho más corto –
Correcto, el cambio de nombre no es minificación. Eso es ofuscación. El objetivo de la minificación no es dañar, con excepción de los comentarios, la capacidad de leer el documento después del uso de una herramienta de embellecimiento. Un buen minificador no cambiará el nombre de nada ni alterará la funcionalidad de javascript o css y dejará el código del documento completo en una sola línea con solo la cantidad mínima de espacio en blanco sin impacto en el contenido. – austincheney
Te recomiendo que pruebes WebMarkupMin Online.
El WebMarkupMin Online es una herramienta gratuita en línea para minificar su código HTML, XHTML y XML. Los minitores HTML y XHTML admiten la minificación del código CSS de style etiquetas y atributos, y la minificación del código JavaScript de script etiquetas, atributos de eventos e hipervínculos con javascript: pseudo protocolo.Estos minificadores admiten múltiples algoritmos de minificación CSS (Mads Kristensen Efficient stylesheet minifier, Microsoft Ajax CSS Minifier y YUI CSS Compressor) y minificación de JavaScript (Douglas Crockford's JSMin, Microsoft Ajax JS Minifier y YUI JS Compressor).
Estas herramientas se basan en la biblioteca WebMarkupMin.
Creo que la palabra clave que está buscando aquí es "minify" – Jrod
@Jrod: Y "ofuscación" :) – mouad