Cómo descargar CSS innecesarios con Grunt

El uso de un marco, como Bootstrap y Foundation, es una de las formas más rápidas de crear un sitio web receptivo. Estos marcos tienen todo lo necesario, incluidos los componentes Grid y User Interface para construir un sitio web decente y funcional.

Pero, los marcos apuntan a atender tantos escenarios web como sea posible. Por lo tanto, incluyen montones de CSS predefinidos que no puedes usar en tu sitio web también.

No todos los estilos son útiles para cada propósito, pero tenerlos a todos aumenta el tamaño de su hoja de estilo innecesariamente, lo que en última instancia afecta el rendimiento de carga de su sitio web. En este artículo, vamos a mostrar cómo descargar esos estilos innecesarios de las hojas de estilo .

Empezando

Para lograr esta idea, necesitamos Grunt CLI . Así que asegúrese de tenerlo instalado en su computadora. Puede consultar estos dos artículos anteriores para obtener más información al respecto:

• Cómo eliminar módulos innecesarios en jQuery
• Solucionando el error "Comando no encontrado" de Grunt en la Terminal

Supongo que tiene un directorio de proyecto listo, que contiene HTML y CSS.

Como puede ver en la siguiente captura de pantalla, tengo dos carpetas llamadas build : se usa para guardar las hojas de estilo en la etapa de desarrollo; y css : esta será la carpeta de destino de la salida final de la hoja de estilo.

Luego navegue al directorio del proyecto a través de Terminal y escriba el siguiente comando de forma consecutiva. Esos dos comandos instalan Grunt y grunt-uncss, el plugin de Grunt que necesitamos para ejecutar la tarea para eliminar el CSS no utilizado.

 npm instalar grunt --save-deve npm instalar grunt-uncss --save-deve 

Configuracion basica

Crea un archivo llamado Gruntfile.js en tu directorio de proyecto. Abra el archivo en un editor de código y coloque los siguientes códigos en él.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

El código anterior es la configuración básica del complemento; grunt-uncss tomará los enlaces de la hoja de estilo de .html, encontrará los selectores de CSS que no se utilizan en el especificado. html, y envíe la salida a css/style.css .

Configuración opcional

grunt-uncss viene con una cantidad de opciones. Digamos que quiere que ignore los selectores particulares, puede incluir el parámetro ignore y especificar los selectores, como ese.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, opciones: {ignore: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], }}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

También puede controlar que grunt-css procese solo para hojas de estilo particulares en lugar de las que se extraen del archivo HTML con el parámetro de stylesheets .

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {files: {'css / style.css': ['index.html']}}, opciones: {ignore: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], stylesheets: [' build / style.css ']}}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Configure la ruta de salida según los requisitos de su proyecto.

Ejecute UnCSS

A continuación se muestra el contenido de mi archivo HTML.

 Descargar CSS 
1ra
2nd
Tercero

... y este es el contenido de mi hoja de estilos.

 .wrapper {ancho: 960px; margen: 60px auto; } .page-title {color: rojo; } .first-div, .second-div, .third-div, .fourth-div {ancho: 100px; altura: 100px; } .first-div {background-color: # 000; color: #fff; } .second-div {background-color: # 555; color: #ccc; } .third-div {background-color: #ccc; color: # f3f3f3; }. Fourth-Div {background-color: #aaa; color: # 777; posición: absoluta; } 

La única clase que no está presente en el archivo HTML es. .fourth-div . La clase ha sido eliminada de la hoja de estilo. Inicie Terminal y escriba grunt para ejecutar la tarea configurada en Gruntfile.js.

Abra ambos archivos CSS. Verá que el selector de clase. .fourth-div ya se ha eliminado ya que no se usa en el HTML.

Cuando tenga montones de estilos sin usar, este consejo puede ayudarlo a disminuir significativamente el tamaño del archivo de la hoja de estilo.

20 foros populares para diseñadores web y desarrolladores

El diseño web cambia y se transforma tan rápido que es casi imposible para nosotros estar al tanto de las tendencias lo suficientemente rápido. Una forma sencilla que puede ayudar es visitar foros populares de diseño web para ver qué es lo que está zumbando en la comunidad.Los foros son un excelente lugar para descubrir las novedades, lo que está de moda y lo más interesante de hoy . Partic

(Consejos de tecnología y diseño)

Digitalice fotos antiguas en su teléfono inteligente con Google PhotoScan

Puede que tomemos miles de fotos en estos días, pero todos sabemos que una foto antigua puede dar más vueltas a lo que comió en el desayuno esta mañana. Google ahora le permite digitalizar sus fotos antiguas con una aplicación especial llamada PhotoScan, actualmente disponible solo para Android e iOS .Mant

(Consejos de tecnología y diseño)