Para algún proyecto de desarrollo web, estoy empezando a usar algunos marcos frontend externos. No soy un buen diseñador por lo que son muy útiles, pero nunca exploto la mitad de sus capacidades.
Entonces, para ahorrar espacio en mis archivos CSS , estoy buscando una herramienta que pueda comprender mi arquitectura DOM y mi archivo CSS , y luego eliminar todas las declaraciones inútiles.
Debo decir que creo que esta opción es mejor que mi recomendación original; mi recomendación original fue excelente para una búsqueda rápida, esto es mejor para hacer paquetes de lanzamiento.
UnCSS y específicamente en lo que estoy basando la recomendación es el envoltorio The Grunt para UnCSS ; que, por supuesto, se integra en el sistema de compilación Grunt para una gran automatización.
Hay bastantes opciones de personalización ( enumeradas en detalle también ), y admite archivos css locales y remotos como fuentes.
Si lo usa en Grunt , sugiero usarlo junto con grunt-processhtml para hacer que su (s) página (s) haga referencia automáticamente a los nuevos archivos css concatenados y limpios.
Cómo lo uso: (un recorte de mi gruntfile.js)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
main: {
options: {
report: 'gzip'
},
files: {
'<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
}
}
},
processhtml: {
main : {
options: {
strip: false
},
files: [{
expand: true,
cwd: '',
src: '<%= src_files_html %>',
dest: '<%= grunt.option("outpath") %>'
}]
}
}
y luego en mi archivo html tengo esto:
<!-- build:css ./css/cleaned.min.css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link href="./css/style.css" rel="stylesheet">
<!-- /build -->
que se transforma en:
<link rel="stylesheet" href="./css/cleaned.min.css">
y el CSS es mucho más pequeño y mejor para el rendimiento y el ancho de banda móvil.
Tengo una gran opción, al menos me encanta, aunque no es una aplicación web ni una aplicación de Linux.
Recomiendo el uso de CSS del complemento de Firefox ; requiere Firefox y el complemento Firebug de Firefox .
Uso:
SCAN
Desafortunadamente, el css limpio exportado tiene algunas molestias; algunas reglas se eliminan (buenas) pero algunas tienen el prefijo UNUSED.
Debería haber una opción IMO para simplemente eliminarlas también, pero actualmente no creo que haya (al menos si es así, nunca lo he encontrado).
Como solución alternativa, lo que siempre he hecho es simplemente copiar y pegar en Notepad ++ y usar la búsqueda y reemplazar con esta expresión regular como la cadena de búsqueda: UNUSED\..*?\}
(y seleccionar . matches newlines
) y un reemplazo en blanco para simplemente deshacerme de ellos. - para hacer lo mismo en Sublime que usaría (?s)UNUSED\..*?\}
como expresión regular. La mayoría de los otros buenos editores de texto deberían tener una funcionalidad similar.
autoscan
función para que sea mucho menos trabajo manual.He creado esta herramienta de eliminación de CSS no utilizada en línea basada en navegador .
Características:
Descargo de responsabilidad: soy el autor del código.
IntelliJ IDEA tiene algunas potentes funciones de desarrollo web :
Sin embargo, debe tener Ultimate Edition para tener acceso a las funciones de desarrollo web (gratis si es el líder del proyecto o un comprometido habitual en un proyecto de código abierto).
Escribimos una herramienta en línea gratuita para esto: UnusedCSS
Rastrea recursivamente su sitio web (siguiendo enlaces internos) y encuentra selectores no utilizados (muchas otras herramientas procesan una sola página).
He usado el uso de CSS del complemento Firebug en algunos proyectos antes; el único inconveniente es que tiene que navegar manualmente por todo el sitio para obtener un mapa preciso de los estilos que se usan.
Sin embargo, le dará versiones simplificadas de sus archivos css que puede usar para reemplazar sus hojas de estilo actuales.
Nick Dickinson Wilde
Nick Dickinson Wilde