Cómo Combinar Media Queries Duplicadas
Hoy en día, existen numerosos FrameWorks de trabajo que pueden ayudarle a crear rápidamente sitios web responsive. Bootstrap y Foundation, Por ejemplo, vienen con un conjunto de componentes personalizados para un sitio Web, complementos, un montón de reglas de estilo predefinidas, así como Media Queries de CSS3 para la construcción de mallas de tipo responsive.
Sin embargo, uno de los inconvenientes del uso de estos FrameWorks es que las Media Queries se encuentran dispersos, ya que se declaran y anidan dentro de la mixins o las Funciones. Así puedes terminar con múltiples Media Queries duplicadas a través de los códigos.
¿No sería mejor si pudiéramos eliminar estos duplicados y combinarlos en una regla CSS simple? Si piensas lo mismo, te invitamos a seguir leyendo el articulo.
Inicialmente
Esta tarea depende de Grunt y Grunt CLI, un paquete de Node.js para la automatización de tareas. En nuestro caso lo guiaremos a traves de Mac, no te preocupes, tambien esta para Windows. En la Terminal o Símbolo del sistema, escriba el comando siguiente para instalar Grunt CLI (Command Line).
[bash]npm install -g grunt-cli[/bash]
Después de ejecutar el comando anterior, asegúrese de que el comando Grunt funciona. Puedes probarlo escribiendo grunt –version, el cual debe mostrar el número de versión del Grunt instalada, justo de la siguiente manera:
Sin embargo, si se encuentra con un error cuando el comando no se encuentra o reconoce, puede ver la solucion a este error en el siguiente articulo.
Instalando Plugin Grunt
Navegue a la carpeta del proyecto, y ejecute el comando siguiente para crear un archivo llamado Gruntfile.js que se utiliza para especificar las funciones de Grunt y registrar las tareas.
[bash]touch Gruntfile.js[/bash]
Escriba estos dos comandos para descargar el módulo Grunt, que se requiere para ejecutar la tarea más tarde. Descargue también un plugin llamado grunt-combine-media-queries (CMQ) para combinar búsquedas de Media Queries.
[bash]
npm install grunt –save-dev
npm install grunt-combine-media-queries –save-dev
[/bash]
Después de que el proceso esté completo, usted debe encontrar una carpeta llamada node_modules adicionales en el directorio del proyecto, el cual contiene los módulos.
Registrando Y Configurando Tareas
Abramos el Gruntfile.js y poner el siguiente código en él.
[bash]
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’);
};
[/bash]
Este código anterior configura la tarea CMQ. Contiene dos parámetros: log y files:
El parámetro de log es un valor booleano que se puede establecer ya sea true o false; si se define como true se creará un archivo de registro compuesto por Media Queries procesadas.
El parámetro files especifica los archivos de destino y la carpeta de salida. Y dado el ejemplo de código anterior, buscará todos los archivos CSS en la carpeta build y pasar el resultado en la carpeta de salida. Puede sustituir la ruta según su propia configuración del proyecto.
Ejecutando La Tarea
En este punto, todo lo que se ha configurado; hemos instalado Grunt CLI, módulo de Grunt, así como el plugin para combinar las consultas de las Media Queries. Ahora, sólo tenemos que ejecutar la tarea.
A modo de ejemplo, se tiene un archivo CSS que contiene varias Media Queries duplicados como se puede ver a continuación.
Abra la terminal, asegúrese de que todavía está dentro el directorio del proyecto. Entonces sólo tiene que escribir grunt, como tal.
Hemos terminado. A continuación se muestra la comparación entre el archivo original y el archivo de salida.
