grunt-autoprefixer

grunt-autoprefixer

Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.

Getting Started

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-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-autoprefixer');

The "autoprefixer" task

Overview

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.
    },
  },
})

Options

options.browsers

Type: Array Default value: ['> 1%', 'last 2 versions', 'ff 17', 'opera 12.1']

You can specify browsers actual for your project:

options: {
  browsers: ['last 2 version', 'ie 8', 'ie 7']
}

View more.

options.diff

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.

options.map

Type: Boolean|String Default value: false

If true, the plugin will try to find an existing source map (generated by a pre-processor, for instance) file and generate a new map based on a found map (or just generate a new map). If string is specified, the plugin will look for an input source map at the specified directory.

options: {
  map: true // or 'custom/path/to/maps/'
}

You cannot specify a path where to save a map file, it will be saved at the same directory as the output CSS file.

Usage Examples

grunt.initConfig({

  autoprefixer: {

    options: {
      // Task-specific options go here.
    },

    // just prefix the specified file
    single_file: {
      options: {
        // Target-specific options go here.
      },
      src: 'src/css/file.css',
      dest: 'dest/css/file.css'
    },

    // prefix all specified files and save them separately
    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 specify only `src` param, the destination will be set automatically,
    // so specified 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
    },
  }

});

Contributing

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.