Morton 5 de abril de 2014 a las 07.32
   Imprimir artículo
elWebmaster.com

Limpia el CSS que no utilizas de tu c贸digo con Uncss


css3wide1驴Sabes qu茅 es tan bueno que a帽adir herramientas a un sitio web o aplicaci贸n? Remover cosas que no necesitan. Afortunadamente, hay una herramienta que te permite deshacerte del CSS no utilizado en tu sitio. 驴Quieres conocerla?

Ya sea c贸digo, im谩genes, o dependencias, deshacerse de todo el c贸digo basura es como el primer sorbo de un gran vaso de vino luego de un d铆a de estresante trabajo. Y para eso hay una herramienta llamada Uncss, desarrollada en NodeJS. Un uso b谩sico de la herramienta de l铆nea de comandos de Uncss ser铆a:

uncss http://www.elwebmaster.com > styles.css

La salida de la ejecuci贸n es una hoja de estilos presentado s贸lo las reglas de CSS usadas. Las no usadas son removidas.

驴Pero c贸mo funciona Uncss? Los archivos HTML son cargados por PhantomJS y JavaScript es ejecutado. Las hojas de estilo utilizadas son extra铆das del HTML resultante. Las hojas de estilo son concatenadas y las reglas son parseadas por css-parse. los filtros document.querySelector dejan afuera a los selectores que no son encontrados en los archivos HTML. Las reglas restantes son convertidas de vuelta a CSS.

Como con cada herramienta basada en NodeJS, puedes sacar ventaja de su API en JavaScript. Aqu铆 hay un ejemplo de uso:

  1. var uncss = require('uncss');
  2.  
  3. var files   = ['my', 'array', 'of', 'HTML', 'files'],
  4.     options = {
  5.         ignore       : ['#added_at_runtime', /test\-[0-9]+/],
  6.         media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
  7.         csspath      : '../public/css/',
  8.         raw          : 'h1 { color: green }',
  9.         stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
  10.         ignoreSheets : [/fonts.googleapis/],
  11.         urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
  12.         timeout      : 1000,
  13.         htmlroot     : 'public'
  14.     };
  15.  
  16. uncss(files, options, function (error, output) {
  17.     console.log(output);
  18. });
  19.  
  20. uncss(files, function (error, output) {
  21.     console.log(output);
  22. });
  23.  
  24. var raw_html = '...';
  25. uncss(raw_html, options, function (error, output) {
  26.     console.log(output);
  27. });

Haz clic aqu铆 para descargar Uncss >>

Te recomendamos darle a Uncss una oportunidad. 隆Esperamos que te sea de utilidad!

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder