Cómo combinar consultas de medios duplicados

Hoy en día, existen numerosos marcos que pueden ayudarlo a crear rápidamente sitios web receptivos. Bootstrap y Foundation, por ejemplo, vienen con un conjunto de componentes de sitio web comunes, complementos, montones de reglas de estilo predefinidas y consultas de medios de CSS3 para construir la cuadrícula de respuesta.

Sin embargo, uno de los inconvenientes de utilizar estos marcos es que las consultas de los medios se dispersan a medida que se declaran y anidan dentro de Mixins o las Funciones. Así que puede terminar con múltiples consultas de medios duplicados en todos los códigos .

¿No sería mejor si pudiéramos quitar estos duplicados y combinarlos en una sola regla de CSS ? Si está de acuerdo, revise este consejo.

Empezando

Esta tarea depende de Grunt y de Grunt CLI, un paquete Node.js para la automatización de tareas. En Terminal o Símbolo del sistema, escriba el siguiente comando para instalar Grunt CLI (Línea de comando).

 npm install -g grunt-cli 

Después de ejecutar los comandos anteriores, asegúrese de que el comando grunt funcione. Puedes probarlo escribiendo grunt --version que debería mostrar el número de versión de Grunt instalado, como ese.

Sin embargo, si encuentra un error donde no se encuentra o no se reconoce el comando, diríjase a nuestra publicación anterior sobre cómo solucionarlo: Resolviendo el error "Comando no encontrado" en el terminal [Quickfix]

Instalar Grunt Plugin

Navegue hasta la carpeta del proyecto y ejecute el siguiente comando para crear un archivo llamado Gruntfile.js que se utilizará para especificar las funciones de Grunt y registrar las tareas .

 toca Gruntfile.js 

Escriba estos dos comandos a continuación para descargar el módulo Grunt, que se requiere para ejecutar la tarea más adelante. Descargue también un complemento de Grunt llamado grunt-combine-media-queries (cmq) para combinar consultas de medios coincidentes.

 npm install grunt --save-dev npm instalar grunt-combine-media-queries --save-dev 

Después de completar el proceso, debe encontrar una carpeta adicional llamada node_modules en su directorio de proyecto, que contenga esos módulos.

Registro y configuración de tareas

Vamos a abrir el Gruntfile.js y poner el siguiente código en él.

 module.exports = function (grunt) {grunt.initConfig ({cmq: {options: {log: false}, your_target: {files: {'output': ['build / *. css']}}}}); grunt.loadNpmTasks ('grunt-combine-media-queries'); grunt.registerTask ('default', 'cmq'); }; 

Este código arriba configura la tarea cmq . Contiene dos parámetros, log y files :

El parámetro de log es un booleano que puede establecer en true o false ; si se establece en true, creará un archivo de registro compuesto por las consultas de medios procesadas.

El parámetro de files especifica los archivos de destino y la carpeta de salida. Y dado el ejemplo de código anterior buscará todo el archivo CSS en la carpeta de build y pasará el resultado en la carpeta de output . Puede reemplazar la ruta según su propia configuración de proyecto.

Ejecuta la Tarea

En este punto, todo ha sido configurado; hemos instalado Grunt CLI, el módulo Grunt y el complemento para combinar consultas de medios. Ahora, solo tenemos que ejecutar la tarea.

Como ejemplo, tengo un archivo CSS que contiene varias consultas multimedia duplicadas, como puede ver a continuación.

Abrir Terminal, asegúrese de que todavía está "en" su directorio de proyecto. Luego simplemente escriba grunt, como tal.

Hemos terminado. A continuación se muestra la comparación entre el archivo de origen y el archivo de salida.

Referencia adicional

• Comenzando con GruntJS
• Grunt Combine consultas de medios Repo

20 hermosas casas en el lago que te encantaría tener [PICS]

Una casa refleja muchas cosas sobre ti . Las casas flotantes son excelentes ejemplos de casas que no solo son capaces de combinar forma y funcionalidad, sino que en la mayoría de los casos, también consideran el entorno y cómo usarlo por completo. Por supuesto, también hay algo relajante en estar rodeado de agua. Le

(Consejos de tecnología y diseño)

5 características de Facebook que probablemente no sepa

El año pasado, Facebook lanzó Nearby Friends que te dice dónde está la ubicación de tu amigo y, recientemente, Facebook te permite realizar pagos a través de Facebook Messenger. ¿Pero sabías que Facebook mantiene un archivo de todo lo que has puesto en la red social, incluso cosas que has eliminado antes? ¿Te gu

(Consejos de tecnología y diseño)