Pack same media query rules into one media query rule using CSS MQPacker.
This plugin requires Grunt ~0.4.2
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
$ npm install grunt-css-mqpacker --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-css-mqpacker');
In your project's Gruntfile, add a section named css_mqpacker
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
css_mqpacker: {
main: {
options: {
map: true,
sort: true
},
expand: true,
cwd: 'src/css/',
src: '*.css',
dest: 'dest/css/'
}
},
});
Running $ grunt css_mqpacker
with these options will pack and sort media queries in src/css/*.css
with inline source maps, and output to dest/css/*.css
.
The task options are the same as second argument of PostCSS pack()
method. With these options, you can create or update source maps, and sort queries. For more information, please read the CSS MQPacker document.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.