Apply several post-processors to your CSS using PostCSS.
This plugin requires Grunt ~0.4.0
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-postcss --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-postcss');
$ npm install grunt-postcss autoprefixer-core csswring
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer-core')({browsers: 'last 1 version'}).postcss,
require('csswring').postcss
]
},
dist: {
src: 'css/*.css'
}
}
});
The usage and options are similar with grunt-autoprefixer (except browsers
option). The only new option is:
Type: Array
Default value: []
An array of PostCSS compatible post-processors.
Unlike the traditional approach with separate plugins, grunt-postcss allows you to parse and save CSS only once applying all post-processors in memory and thus reducing your build time. PostCSS is also a simple tool for writing your own CSS post-processors.