es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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.

 CSS descargado 

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.

Pruebe estas aplicaciones de facturación eficiente y gestión del tiempo

Pruebe estas aplicaciones de facturación eficiente y gestión del tiempo

¡El tiempo vuela! ¡El tiempo es escaso! ¡El tiempo es dinero! - y así continúa. Lanzar clichés como estos no ayudará mucho a su productividad ni a su negocio. Solo te animan a trabajar más duro. Pero simplemente trabajar más duro no traerá los mejores resultados. Necesita ayuda para realizar un mejor seguimiento de su tiempo, gastos y tareas de gestión de proyectos.Trabajar &

(Consejos de tecnología y diseño)

Mira videos de YouTube junto con amigos usando UpTime

Mira videos de YouTube junto con amigos usando UpTime

En su mayor parte, mirar videos de YouTube en su dispositivo móvil es en su mayoría una experiencia solitaria. Sin embargo, ¿qué pasa si hay una aplicación que te permite ver un video de "YouTube" con tus amigos al mismo tiempo ? Si una aplicación le atrae, entonces puede interesarle lo que UpTime tiene para ofrecer.Cread

(Consejos de tecnología y diseño)