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.

50 Taza De Café No le importará Conseguir un cambio

Si eres un gran amante del café como yo, nunca tendrías suficientes tazas de café . Una buena taza de café o incluso té te hace sentir como en casa y acogedor, incluso en la oficina. En lugar de simplemente una pieza de cerámica aburrida, estos días, las tazas pueden ser una obra de arte o un objeto que muestra el gusto personalizado de sus dueños .Sin emb

(Consejos de tecnología y diseño)

Facebook implementa una característica de contenido curada llamada "Colecciones"

Después de semanas de ser interrogado por el posible papel que jugó durante las elecciones presidenciales de EE. UU., Facebook se está preparando para lanzar una nueva función como parte de los esfuerzos de la compañía para combatir las noticias falsas : Colecciones.La función es bastante idéntica a la sección Discover de Snapchat ™. Las colec

(Consejos de tecnología y diseño)