Duplicate Media Queries

Today there are many frameworks that allow you to quickly create responsive websites. For example, Bootstrap and Foundation include a set of common website components, plugins, many predefined style rules, and CSS3 media queries to create the responsive grid.

However, one of the disadvantages of using these frameworks is that multimedia requests are scattered when they are declared and nested in Mixins or functions. So, you may have received several duplicate media requests in the Codes.

First Steps

This task depends on both Grunt and Grunt CLI, a node.js package for task automation. In the Terminal or command prompt, type the following command to install Grunt CLI (command line).

After running the above commands, make sure that the grunt command is working. You can test it by typing grunt –version, which should display the installed Grunt version number.

However, if you experience an error where the command cannot be found or recognized, check out our previous article on how to fix The error: solving the grunting error “command not found” in the Terminal [Quickfix]

Install the Grunt Plugin

Navigate to the project folder and run the following command to create a file called Gruntfile.js, which specifies the grunt functions and saves the tasks.

Enter these two commands below to download the Grunt module needed to run the task after. Also, download a Grunt Plugin called grunt-combine-media-queries (cmq) to combine the corresponding media queries.

Once the process is complete, you should find in your project directory an additional folder called node_modules that contains these modules.

Save and configure a task

The log parameter is a Boolean value that you can set to true or false; if it is set to true, a log file consisting of the processed multimedia requests is created.

The files parameter specifies the destination files and the output folder. Given the above code example, the entire CSS file is searched in the build folder and the result is passed to the output folder. You can override the path based on your own project configuration.

Execute the task

At this point, everything is configured; we have installed Grunt CLI, Grunt Module, as well as the Plugin to combine multimedia requests. Now all we have to do is complete the task.
Open the Terminal and make sure that you are still “in” the directory of your project. Then just press grunt.
We’re done here. Below you can see the comparison between the source file and the output file.