Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.
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-autoprefixer --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-autoprefixer');In your project's Gruntfile, add a section named autoprefixer to the data object passed into grunt.initConfig().
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})Type: Array
Default value: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
You can specify browsers actual for your project:
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
}Type: Boolean
Default value: false
Pass true to enable ‘cascade’ indentation. Read more here.
Type: Boolean|String
Default value: false
Set it to true if you want to get an output patch file:
options: {
diff: true // or 'custom/path/to/file.css.patch'
}Also you can specify a path where to save this file. More examples in Gruntfile.
Type: Boolean|String|undefined
Default value: undefined
If the map option isn't defined, Autoprefixer will look for source map from a previous compilation step (either inline map or separate one) and update it automatically. Let's say you have path/file.css and path/file.css.map from SASS, Autoprefixer will find that map, update it and save to a specified destination.
If true is specified, Autoprefixer will try to find an input source map file as described above and generate a new map based on the found one (or just generate a new map, unlike the situation when the map option is undefined).
If you keep your map from a pre-processor in another directory (e.g. path/file.css and another-path/file.css.map), you can specify the path another-path/ in the map option to point out where grunt-autoprefixer should look for an input map to update it.
Also you can specify false. In that case Autoprefixer will not generate or update source map even if there is one from a previous compilation step near an input file or inlined to it (Autoprefixer will delete a map annotation comment from an input file).
You cannot specify a path where to save a map file, it will be saved at the same directory as the output CSS file or inlined to it (check out the option below).
Type: Boolean|undefined
Default value: undefined
If the option isn't specified, Autoprefixer will inline its map if a map from a previous compilation step was inlined to an input file or save its map as a separate file respectively.
You can specify true or false to force that behaviour as you like.
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
// prefix the specified file
single_file: {
options: {
// Target-specific options go here.
},
src: 'src/css/file.css',
dest: 'dest/css/file.css'
},
// prefix all files
multiple_files: {
expand: true,
flatten: true,
src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
},
// if you have specified only the `src` param, the destination will be set automatically,
// so source files will be overwritten
no_dest: {
src: 'dest/css/file.css' // globbing is also possible here
},
diff: {
options: {
diff: true
},
src: 'src/css/file.css',
dest: 'dest/css/file.css' // -> dest/css/file.css, dest/css/file.css.patch
},
sourcemap: {
options: {
map: true
},
src: 'src/css/file.css',
dest: 'dest/css/file.css' // -> dest/css/file.css, dest/css/file.css.map
},
}
});Check out project's Gruntfile.js for more examples.
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.