Grunt + Sass + Autoprefixer

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
        options:{
          style:'compressed'
        },
        files: {
          'css/style.css' : 'scss/style.scss'
        }
      }
    },
    autoprefixer:{
      dist:{
        files:{
          'css/style.css':'css/style.css'
        }
      }
    },
    watch: {
      css: {
        files: 'scss/*.scss',
        tasks: ['sass', 'autoprefixer']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.registerTask('default',['watch']);
}

package.json

{
  "name": "jshawl.com",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-autoprefixer": "~0.2.20130806"
  }
}

Well, this is pretty rad. All I have to do is

$ grunt and:

1. My Sass files are watched and compiled
2. The generated CSS runs through Autoprefixer.

Sweet

Awesome, thanks man!

This works awesome for us, but we do have a problem with our sourcemaps.
The SASS watcher generates a sourcemap and places a comment in the CSS file.
The Autoprefixer watcher however removes this specific comment at the end of the CSS file.

Solution
enable sourcemaps in sass:

sass: {
  dist: {
    options: {
      sourcemap: true
    },
    files: {
      'style/css/master.css': 'style/sass/master.sass'
    }
  }
}

update sourcemaps with autoprefixer:

autoprefixer: {
  dist: {
    options: {
      map: true
    },
    files: {
      'style/css/master.css': 'style/css/master.css'
    }
  }
}

This helped me a lot, thanks! The only change is that I'm using postcss with autoprefixer-core instead of grunt-autoprefixer, which has been deprecated in favour of grunt-postcss:

postcss: {
    options: {
        processors: require('autoprefixer-core')({browsers: 'last 2 versions'}),
    },
    dist: {
        src: 'css/*.css',
    },
},

Very very nice ! Was looking for how to make the three together simply and now that's perfect for it, thanks !

this is awesome! Save me so much time and make grunt less puzzling.

Very helpful, thank you!

Following up on @EdmundoJr's comment, autoprefixer-core has been deprecated as well, use autoprefixer instead (just replace autoprefixer-core with autoprefixer)

Thanks to this gist a few years ago I finally grasped enough to get my sweet Grunt setup running. Thank you!
Here's my updated version for 2018:
https://gist.github.com/squarecandy/a27671c96f3d226e0d4b9a118bfd1314

• using grunt-sass and node-sass to avoid ruby dependency
• using "plain" autoprefixer as suggested above
• spits out valid source maps, which can be a challenge to get working with a sass > autoprefixer pipeline...