Webhook.com libsass, autoprefix with css livereload flow.

Gruntfile.js

// This setup will compile sass, run autoprefixer and then launch webhook's default grunt tasks.
// I also uses webhook's build-static task so that it only builds the css and
// allows livereload to refresh the css alone instead of refreshing the entire page.

'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      sass: {
        files: ['sass/**/*.{scss,sass}'],
        // Run sass, then autoprefixer, then webhooks build-static to build just the static files and have instantaneous live reload on css changes
        tasks: ['sass', 'autoprefixer', 'build-static']
      }
    },
    sass: {
      options: {},
      dist: {
        files: {
          'static/css/style.css': 'sass/style.sass'
        }
      }
    },
    autoprefixer: {
      options: {
        browsers: ['last 2 versions', 'ie 9'],
        map: true
      },
      dist: {
        src: 'static/css/style.css',
        dest: 'static/css/style-prefix.css'
      }
    }
  });

  // If you start using advanced map functions you may need to switch to using contrib--sass
  // instead of grunt-sass which currently uses an older but way faster libsass
  // grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');

  // In a normal setupt you would use the register task like this in grunt
  // Since we are using webhooks internal simple watch we are going to expand on that below
  // grunt.registerTask('default', ['sass', 'autoprefixer', 'simple-watch']);

  // NEVER REMOVE THESE LINES, OR ELSE YOUR PROJECT MAY NOT WORK
  require('./options/generatorOptions.js')(grunt);
  grunt.loadTasks('tasks');

  // Rename webhook's default task to wh-default so we can compile our own css first and then launch wh-default
  grunt.renameTask('default', 'wh-default');
  grunt.registerTask('default', ['sass', 'autoprefixer', 'wh-default']);

};