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

Amazon Echo Show: el último dispositivo inteligente con Alexa

Amazon no es ajeno al concepto de sistemas domésticos inteligentes con un asistente digital integrado . Después de todo, la compañía fue la primera en introducir dicho dispositivo a través de Amazon Echo, un altavoz inteligente impulsado por Alexa que se lanzó un año completo antes de que Google ingresara al mercado a través de Google Home.Desde e

(Consejos de tecnología y diseño)

Las aplicaciones web más populares del mes: agosto

Bienvenido a nuestro último resumen de aplicaciones web. Tuvimos algunas sugerencias excelentes para las aplicaciones en la redada del mes pasado, y hemos encontrado muchas más que creemos que son muy útiles y útiles.Este mes, nuestras selecciones incluyen una aplicación web que te ayuda a ponerte en forma y comer bien (sí la salud es no.1 par

(Consejos de tecnología y diseño)